webpack使用總結(jié)：

入門(mén)使用：

創(chuàng)新互聯(lián)建站擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10多年，專(zhuān)業(yè)且經(jīng)驗(yàn)豐富。10多年網(wǎng)站優(yōu)化營(yíng)銷(xiāo)經(jīng)驗(yàn)，我們已為上千中小企業(yè)提供了成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站解決方案，按需求定制開(kāi)發(fā)，設(shè)計(jì)滿意，售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

這個(gè)報(bào)錯(cuò)說(shuō)明需要安裝相應(yīng)的Loader,并在引用時(shí)指定相應(yīng)的loader

執(zhí)行成功如圖：

chunk指相應(yīng)的區(qū)塊。

要是css引入正確：必須引入css-loader，要使改變的css生效，要引入style-loader;

各個(gè)js的函數(shù)調(diào)用只能在各自的函數(shù)中寫(xiě)，引入只是合并的意思，但并不能直接使用引入的js的函數(shù)。

而且style-loader要寫(xiě)在css-loader的前面，否則報(bào)如下錯(cuò)誤。

執(zhí)行成功之后，css插入到了head標(biāo)簽里。

loader正確順序：”style-loader!css-loader!./style.css”

loader的加載順序是從右向左加載，所以

loader正確順序：：style-loader!css-loader!postcss-loader!less-loader

sass-loader或者less-loader等語(yǔ)言預(yù)編譯loader在webpack中的位置為：

1．最先放sass-loader或者less-loader

2．postcss-loader

3．css-loader

4．style-loader

注意：如果一個(gè)css中import導(dǎo)入另一個(gè)css,另一個(gè)css的postcss-loader沒(méi)生效，這時(shí)要給css-loader加一個(gè)參數(shù)，指定import導(dǎo)入css的數(shù)量：

loader:’style-loader!css-loader?importLoaders=1!postcss-loader’

為了使用簡(jiǎn)便，不能每次在引入css的時(shí)候加loader，則可以在命令中實(shí)現(xiàn)：

webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'

去掉模塊引入css時(shí)加入的loader，1.x可以，3.0依舊會(huì)報(bào)錯(cuò)。

--watch

在命令后面加 --watch ，可以不用每次改動(dòng)都執(zhí)行命令，而是自動(dòng)改變

注意：修改了webpack配置需要重啟，即即使設(shè)置了監(jiān)聽(tīng)也要手動(dòng)重新編譯;

關(guān)于版本安裝問(wèn)題：把想要安裝的npm 模塊的名稱(chēng)和版本號(hào)寫(xiě)在package.json的依賴?yán)?，然后npm install就會(huì)自動(dòng)安裝

但是，每次輸入很多命令依舊很繁瑣，解決辦法：

如果要提前配置好輸入的webpack命令，則在package.json中的script下，定義一個(gè)webpack屬性，后面定義所有要輸入的webpack的命令，定義好之后，在命令窗口 運(yùn)行 命令 npm run webpack即可，定義方式與定義npm run dev中的dev是一樣的。

--progress  查看打包過(guò)程

--display-modules 查看打包的模塊

--colors  打包后的命令加顏色區(qū)分

--display-reasons 顯示打包原因

--watch 自動(dòng)監(jiān)聽(tīng)文件改變，若改動(dòng)，自動(dòng)打包，但是修改webpack配置需重新手動(dòng)編譯。

webpack 配置文件

報(bào)錯(cuò)：

output輸出的路徑寫(xiě)成這樣：

而不是這樣：

webpack打包完成之后，顯示打包成功，但是并沒(méi)有生產(chǎn)打包的文件和文件夾，所以這里在path中切記首先要寫(xiě)__dirname+“路徑”

如圖：

個(gè)人理解：如果寫(xiě)成 __dirname+”/path”,則說(shuō)明現(xiàn)在還沒(méi)有要放入的js的文件夾，這樣會(huì)自動(dòng)創(chuàng)建，否則即使執(zhí)行成功，但是會(huì)看不到打包后的js文件，如果已經(jīng)提前創(chuàng)建好要打包的js的存放文件夾，則不需要寫(xiě)__dirname. 【常見(jiàn)問(wèn)題】

如果更改了入口文件的數(shù)量，比如變成數(shù)組形式，或者對(duì)象形式，則需要重新手動(dòng)運(yùn)行npm run webpack。

數(shù)組：用數(shù)組形式寫(xiě)多個(gè)入口文件，則會(huì)合并成指定的一個(gè)打包之后的文件

對(duì)象：分別打包成多個(gè)文件

注意：一個(gè)chunk代表一個(gè)區(qū)塊，則不同的chunk會(huì)打包成不同的文件，如果output寫(xiě)死成一個(gè)路徑，則打包之后第二個(gè)區(qū)塊會(huì)覆蓋第一個(gè)區(qū)塊，解決辦法，chunkname+hash作為占位，則有幾個(gè)區(qū)塊就打包成幾個(gè)區(qū)塊 filename: "[name]-[hash].js"

報(bào)錯(cuò)原因：入口文件的路徑寫(xiě)成了單引號(hào)套雙引號(hào)，所以不識(shí)別。

hash值可以理解為版本號(hào)，只有文件發(fā)生改變時(shí)，hash值才會(huì)變化。

hash值對(duì)靜態(tài)資源的版本管理很有用。

webpack插件

npm安裝該插件

npm install 插件名 --save-dev

一個(gè)很好用的webpack插件：html-webpack-plugin

安裝

npm install html-webpack-plugin --save-dev

使用：

首先在webpack.config.js中引入該插件，

var htmlWebpackPlugin = require('html-webpack-plugin');

然后只需要在webpack配置中modules增加屬性plugins，用來(lái)初始化插件。

寫(xiě)法如下：

plugins: [
new htmlWebpackPlugin() 
]

如果要把自己的html頁(yè)面打包到對(duì)應(yīng)的打包文件夾下：則給該插件映射一個(gè)模版：

plugins: [
new htmlWebpackPlugin({
template:”index.html”
})
]

如果html頁(yè)面想要輸出到打包文件夾最外層目錄，然后js等文件要輸出到j(luò)s對(duì)應(yīng)的文件夾下，則output輸出的時(shí)候把js路徑單獨(dú)配置到對(duì)應(yīng)的目錄下的filename就可以。

代碼如圖：

output: {
        filename: "js/[name]-[hash].js",
        path: __dirname+"/dist"
},

輸出的文件結(jié)構(gòu)如圖：

插件的屬性：

plugins: [
        new htmlWebpackPlugin({
            filename:"index-[hash].html",
            template:'index.html',
            inject:"head",
            title:"我是title",
            date:new Date(),
        })
]

通過(guò)在plugins中定義的屬性和值，可以在頁(yè)面中用<%=  %>模版引擎的方式展現(xiàn)出來(lái)。

eg:<%= htmlWebpackPlugin.options.title %>

并且可以取到值之后進(jìn)行for循環(huán)

<% for (var key in htmlWebpackPlugin.files){ %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

通過(guò)遍歷files和options可以看到插件對(duì)應(yīng)的都有哪些屬性，這樣頁(yè)面中如果有多個(gè)js,一些想放到頭部，一些像放到body中，就可以直接在頁(yè)面中以模板引擎的方式引入js了。

eg: <script type=”text/javascript src=”<%= htmlWebPackPlugin.files.chunks.main.entry %>”>

[此時(shí)inject要記得設(shè)為false]

minify：壓縮 【具體可參照官網(wǎng) www.npmjs.com  中的htmp-webpack-plugin】

多頁(yè)面配置：chunk:[]

plugin是一個(gè)數(shù)組，如果要打包成多個(gè)頁(yè)面，只需寫(xiě)多個(gè)創(chuàng)建插件對(duì)象的實(shí)例，給每個(gè)實(shí)例里寫(xiě)chunk屬性，該屬性是一個(gè)數(shù)組，每個(gè)數(shù)組里對(duì)應(yīng)的js的名稱(chēng)。

excludeChunks:[]    除一些以外

處理模板文件的loader

安裝loader方法:

npm  install  xxx-loader  --save-dev

首先安裝html-loader:

npm  install  html-loader  --save-dev

在webopack.config.js中配置該loader

1. 首先寫(xiě)好自己的html代碼，

<div >
    <h2>模板文件處理 測(cè)試</h2>
</div>
2. 然后再對(duì)應(yīng)的js中import導(dǎo)入該html文件，
import tpl from '../layer.html';
function layer() {
    return {
        name:'layer',
        tpl:tpl
    };
}

export default layer;

3. 然后去App.js中導(dǎo)入該js文件，

4. 最后在App.js中渲染到index.html中

import Layer from './layer.js';
const App = function () {
    var dom = document.getElementById('app');
    var Layer = new Layer();
    dom.innerHTML = Layer.tpl;
};
new App();

有關(guān)html-loader的具體代碼，參見(jiàn)官網(wǎng)templating……

對(duì)于復(fù)雜的模板引擎，安裝ejs-loader

后綴格式可以是.tpl/.ejs

當(dāng)引入tpl的模板文件的時(shí)候，返回的不是一個(gè)字符串，是一個(gè)function

webpack配置：

{
    test:/\.ejs$/,
    loader:'ejs-loader'
 },

app.js

import Layer from './src/js/layer.js';
const App = function () {
    var dom = document.getElementById('app');
    var layer = new Layer();
    dom.innerHTML = layer.tpl({
        name:'John',
        arr:["1111","2222","3333"]
    });
};
new App();

layer.tpl

<div>
    <div>this is <%= name %> layer</div>
    <% for (var i = 0;i < arr.length; i++) { %>
        <%= arr[i] %>
    <% } %>
</div>

[webpack 3.0 報(bào)錯(cuò)]bundle.js:84 Uncaught TypeError: Cannot set property 'innerHTML' of null

處理圖片及其他文件的loader

file-loader

安裝loader

npm install file-loader --save-dev

webpack配置

{
     test:/\.(png|jpg|gif|svg)$/,
     loader:'file-loader'
 },

無(wú)論是在根目錄下的Index.html中直接引用（絕對(duì)路徑?jīng)]有問(wèn)題，相對(duì)問(wèn)題可以被解析），還是css中背景圖片引用，亦或者是在模版文件中引用，在file-loader的作用下，都成功被解析。在模版引擎文件中，src可以以require(“相對(duì)路徑”) 的形式 引入，就可以成功引入，但是直接引用相對(duì)地址就不可以解析。

url-loader:

當(dāng)圖片小于指定大小的時(shí)候，使用url-loader，當(dāng)大于指定大小的時(shí)候，自動(dòng)轉(zhuǎn)換為file-loader

{
   test:/\.(png|jpg|gif|svg)$/,
   loader:'url-loader',
   query:{
         limit:20000, //指定大小 ，單位kb
   name:"src/[name]-[hash:5].[ext]"
  }
 },

p_w_picpath-webpack  loader

圖片壓縮loader

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：webpack學(xué)習(xí)簡(jiǎn)單總結(jié)-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.rwnh.cn/article22/igscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站制作、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)