webpack基礎配置紀實

Vincent.W發表於2017-04-30
Web

GitHub 原始碼

entry 打包入口配置

接受三種方式：string， array， object

module.exports = {
    entry: './src/main.js'
    ...
}複製程式碼
module.exports = {
    entry: ['./src/main.js', './src/test.js']
    ...
}複製程式碼
module.exports = {
    entry: {
        main: './src/main.js',
        test: './src/test.js'
    }
    ...
}複製程式碼

output 打包匯出配置

module.exports = {
    entry: {
        main: './src/main.js',
        a: './src.a.js'
    },
    output: {
        path: './dist',
        filename: 'js/[name]-[chunkhash].js',
        publicPath: 'http://cdn.com/'
    }
    ...
}複製程式碼

path：打包後匯出的檔案路徑

filename：打包後的檔名

[name]對應檔名
[hash]打包檔案hash值
[chunkhash]打包後每個單獨檔案的hash值複製程式碼

publicPath：打包上線環境，用來替換檔案路徑

plugins 外掛系統(陣列)

html-webpack-plugin 自動化生成專案中的html頁面

通過npm安裝

$ npm install html-webpack-plugin --save-dev複製程式碼

在webpack.config.js中

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

module.exports = {
    entry: {
        main: './src/main.js',
        a: './src/a.js',
        b: './src/b.js',
        c: './src/c.js'
    },
    output: {
        path: './dist',
        filename: [name]-[chunkhash].js,
        public: 'http:cdn.com/'
    },
    plugins: [
        //建立一個htmlWebpackPlugin物件，並傳入值
        new htmlWebpackPlugin({
            template: 'index.html', //生成html檔案的模板檔案
            filename: 'a.html', //目標檔案的名稱
            inject: false,  //插入html文件中的位置，value分別為 true，false，head，body
            title: 'this is a.html', // 傳入的html的title
            excludeChunks: ['b', 'c'] // 引入的除b.js 與c.js以外的js檔案
        }),
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'b.html',
            inject: false,
            title: 'this is b.html',
            excludeChunks: ['a', 'c']
        }),
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'c.html',
            inject: false,
            title: 'this is c.html',
            excludeChunks: ['a', 'b']
        })
    ]
}複製程式碼

index.html模板檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 在webpack中預設識別ejs -->
    <!-- title的值為htmlWebpackPlugin傳入的值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
        // js的行內引入方法
        <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
    </script>
</head>
<body>
    <!-- 再通過迴圈遍歷除去main.js 外聯引入對應的js -->
    <% for (var k in htmlWebpackPlugin.files.chunks) { %>
        <% if (k != 'main') { %>
            <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
        <% } %>
    <% } %>
</body>
</html>複製程式碼

關於html-webpack-plugin外掛的使用，工程原始碼為多頁面應用

git clone https://github.com/kingzez/webpack-demo.git複製程式碼

首先切換到

git checkout html-webpack-plugin複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視效果。

Loaders

  • babel-loader
  • css-loader
  • style-loader
  • postcss-loader
  • less-loader
  • sass-loader
  • html-loader
  • ejs-loader
  • file-loader
  • url-loader
  • image-webpack-loader

Loader中所有專案原始碼均為單頁面應用。

Loaders 同樣也是一個陣列，需要定義在一個module中

module: {
    loaders: [
        ...
    ]
}複製程式碼

babel-loader

babel-loader 用於對ES6的程式碼的轉換，首先在終端中執行npm

npm install --save-dev babel-loader babel-core複製程式碼

然後再webpack.config.js中加入

module.exports = {
    context: '__dirname',
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'js/[name].bundle.js'
    },
    module: {
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel',
                    include: path.resolve(__dirname, 'src'), //path.resolve node的api，用於處理路徑；__dirname為當前專案目錄，
                    exclude: path.resolve(__dirname, 'node_modules'),
                    query: {
                        presets: ['latest'] // babel的配置，可在webpack.config.js中配置也可在package.json或建立.babelrc檔案
                    }
            }
        ]
    }
}複製程式碼

css-loader & style-loader & postcss-loader

css-loader 用於處理css模組的打包, style-loader 用於將打包好的css模組插入html中,安裝

npm install --save-dev css-loader複製程式碼
npm install --save-dev style-loader複製程式碼

在webpack.config.js中加入

loaders: [
    {
        test: /\.css$/,
        loader: 'style-loader!css-loader' // loader處理順序是css-loader打包css檔案，後通過style-loader插入到html中
    }
]複製程式碼

在處理瀏覽器相容的情況下，需要對各個瀏覽器加字首，這時需要css後處理器postcss-loader，安裝

npm install --save-dev postcss-loader複製程式碼
npm install --save-dev autoprefixer // 自動新增字首複製程式碼

在webpack.config.js中加入

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader!postcss-loader' // loader處理順序post-loader處理後加上瀏覽器的字首，再由css-loader打包css檔案，後通過style-loader插入到html中
        }
    ]
},
postcss: [
    require('autoprefixer')({
        browsers: ['last 5 versions'] //瀏覽器的最新五個版本
    })
],複製程式碼

如果多個css檔案之間存在@import，以上配置還需要修改

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style!css?importLoaders=1!postcss' // css-loader的importLoaders引數可以解決@import的css檔案不處理的問題
        }
    ]
},
postcss: [
    require('autoprefixer')({
        browsers: ['last 5 versions'] //瀏覽器的最新五個版本
    })
],複製程式碼

關於babel-loader css-loader style-loader postcss-loader 的使用，工程原始碼

git checkout css-style-postcss-loader複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視效果。

less-loader & sass-loader

less-loader 是對less檔案進行處理打包，安裝

npm install --save-dev less-loader複製程式碼

在webpack.config.js中加入

loaders: [
    {
        test: /\.less$/,
        loader: 'style!css!postcss!less'
    }
]複製程式碼

關於less-loader 的使用，工程原始碼

git checkout less-loader複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視效果。

sass-loader同理不做過多介紹，簡單看一下webpack.config.js

loaders: [
    {
        test: /\.scss$/,
        loader: 'style!css!postcss!sass'
    }
]複製程式碼

html-loader & ejs-loader

html-loader 和 ejs-loader 用於處理模板檔案，如果你在一個js檔案中import html from 'somewhere'，接著 npm run webpack 會看到報錯資訊，說沒有處理器處理html檔案，so 安裝

npm install --save-dev html-loader複製程式碼

同樣也可以處理ejs模板檔案，該ejs模板檔案的副檔名也可以自定義，這裡我們定義tpl

npm install --save-dev ejs-loader複製程式碼

看一下在 webpack.config.js 中

loaders: [
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.tpl/,
            loader: 'ejs-loader'
        }
]複製程式碼

關於html-loader ejs-loader 的使用，工程原始碼，可分別執行

git checkout less-loader複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視html-loader的效果。

git checkout ejs-loader複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視ejs-loader的效果。

file-loader & url-loader & image-webpack-loader

用於處理圖片以及其他檔案，例子中對圖片處理，先用file-loader處理，那麼安裝

npm install --save-dev file-loader複製程式碼

安裝完成後對webpack.config.js配置進行修改

loaders: [
    {
         test: /\.png|jpg|gif|svg$/i, //用於匹配各種副檔名結尾的檔案
         loader: 'file-loader',
         query: {
             name: 'assets/[name]-[hash:5].[ext]' // 可選 用於將圖片打包到assets資料夾中
         }
    }
]複製程式碼

在根目錄中的index.html css 中的img background 的圖片引用一般為相對路徑，最佳解決方案為線上的CDN絕對路徑，在模板檔案中的圖片引用如果一定要使用相對路徑的話，需要這樣

 <img src="${ require('../../assets/avator.png') }" />複製程式碼

詳細程式碼請看我的工程專案原始碼，關於 file-loader 的使用，工程原始碼，執行

git checkout file-loader複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視 file-loader 的效果。

url-loader 同樣也可以實現圖片的處理，安裝

npm install --save-dev url-loader複製程式碼

安裝完成後，看一下webpack.config.js

loaders: [
    {
        test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 處理
        loader: 'url-loader',
        query: {
            limit: 20000, //定義限制圖片打包大小，超過限制值，會將圖片轉成base64寫入
            name: 'assets/[name]-[hash:5].[ext]'
        }
    }
]複製程式碼

較好的方案是 url-loader 與 image-webpack-loader 結合使用，安裝

npm install --save-dev image-webpack-loader複製程式碼

安裝完成後，看一下webpack.config.js中

loaders: [
    {
        test: /\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 處理
        loaders: [
            'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
            'image-webpack'
            ]
    }
]複製程式碼

首先通過 image-webpackloader 壓縮圖片後處理再由url-loader處理，通過引數limit限制圖片大小，圖片超過limit限制的值將轉成base64，如果沒超過限制值，則正常打包圖片。

關於 url-loader 與 image-webpack-loader 的使用，工程原始碼，執行

git checkout image-webpack-loader複製程式碼

並執行 npm install 完成依賴的安裝後執行 npm run webpack 檢視 url-loader 與 image-webpack-loader 結合的效果。

完整的webpack.config.js demo檢視，請執行

git checkout release複製程式碼

本紀實經過本人實際操作後的記錄，算為入門級的實踐。

相關文章