webpack學習簡單總結

webpack使用總結：

入門使用：

這個報錯說明需要安裝相應的Loader,并在引用時指定相應的loader

執行成功如圖：

chunk指相應的區塊。

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

各個js的函數調用只能在各自的函數中寫，引入只是合并的意思，但并不能直接使用引入的js的函數。

而且style-loader要寫在css-loader的前面，否則報如下錯誤。

執行成功之后，css插入到了head標簽里。

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

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

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

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

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

2．postcss-loader

3．css-loader

4．style-loader

注意：如果一個css中import導入另一個css,另一個css的postcss-loader沒生效，這時要給css-loader加一個參數，指定import導入css的數量：

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

為了使用簡便，不能每次在引入css的時候加loader，則可以在命令中實現：

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

去掉模塊引入css時加入的loader，1.x可以，3.0依舊會報錯。

--watch

在命令后面加 --watch ，可以不用每次改動都執行命令，而是自動改變

注意：修改了webpack配置需要重啟，即即使設置了監聽也要手動重新編譯;

關于版本安裝問題：把想要安裝的npm 模塊的名稱和版本號寫在package.json的依賴里，然后npm install就會自動安裝

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

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

--progress  查看打包過程

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

--colors  打包后的命令加顏色區分

--display-reasons 顯示打包原因

--watch 自動監聽文件改變，若改動，自動打包，但是修改webpack配置需重新手動編譯。

webpack 配置文件

報錯：

output輸出的路徑寫成這樣：

而不是這樣：

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

如圖：

個人理解：如果寫成 __dirname+”/path”,則說明現在還沒有要放入的js的文件夾，這樣會自動創建，否則即使執行成功，但是會看不到打包后的js文件，如果已經提前創建好要打包的js的存放文件夾，則不需要寫__dirname. 【常見問題】

如果更改了入口文件的數量，比如變成數組形式，或者對象形式，則需要重新手動運行npm run webpack。

數組：用數組形式寫多個入口文件，則會合并成指定的一個打包之后的文件

對象：分別打包成多個文件

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

報錯原因：入口文件的路徑寫成了單引號套雙引號，所以不識別。

hash值可以理解為版本號，只有文件發生改變時，hash值才會變化。

hash值對靜態資源的版本管理很有用。

webpack插件

npm安裝該插件

npm install 插件名 --save-dev

一個很好用的webpack插件：html-webpack-plugin

安裝

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

使用：

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

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

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

寫法如下：

plugins: [
new htmlWebpackPlugin() 
]

如果要把自己的html頁面打包到對應的打包文件夾下：則給該插件映射一個模版：

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

如果html頁面想要輸出到打包文件夾最外層目錄，然后js等文件要輸出到js對應的文件夾下，則output輸出的時候把js路徑單獨配置到對應的目錄下的filename就可以。

代碼如圖：

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

輸出的文件結構如圖：

插件的屬性：

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

通過在plugins中定義的屬性和值，可以在頁面中用<%=  %>模版引擎的方式展現出來。

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

并且可以取到值之后進行for循環

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

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

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

[此時inject要記得設為false]

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

多頁面配置：chunk:[]

plugin是一個數組，如果要打包成多個頁面，只需寫多個創建插件對象的實例，給每個實例里寫chunk屬性，該屬性是一個數組，每個數組里對應的js的名稱。

excludeChunks:[]    除一些以外

處理模板文件的loader

安裝loader方法:

npm  install  xxx-loader  --save-dev

首先安裝html-loader:

npm  install  html-loader  --save-dev

在webopack.config.js中配置該loader

1. 首先寫好自己的html代碼，

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

export default layer;

3. 然后去App.js中導入該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();

有關html-loader的具體代碼，參見官網templating……

對于復雜的模板引擎，安裝ejs-loader

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

當引入tpl的模板文件的時候，返回的不是一個字符串，是一個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 報錯]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'
 },

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

url-loader:

當圖片小于指定大小的時候，使用url-loader，當大于指定大小的時候，自動轉換為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