這是我第二次學(xué)習(xí)webpack了，初見他時(shí)，我是一臉懵逼的，這次再見時(shí)，稍微輕松了一點(diǎn)，現(xiàn)在寫下這份學(xué)習(xí)筆記，用來鞏固自己的記憶，也可以在以后發(fā)生遺忘時(shí)，作為一份用來回顧的資料。
本次使用webpack的版本號(hào)為 3.7.1

學(xué)習(xí)資源：

慕課網(wǎng)教程：http://www.imooc.com/learn/802
webpack官網(wǎng)中文版：https://doc.webpack-china.org

介紹：

webpack的官方介紹中，將webpack描述為一個(gè)模塊打包器，功能是將前端開發(fā)項(xiàng)目中的各個(gè)文件，按照模塊化的方式打包成一個(gè)js文件。實(shí)際上webpack的功能非常強(qiáng)大，除了上述的核心功能，通過對(duì)webpack進(jìn)行合理的設(shè)置，我們可以實(shí)現(xiàn)以下的功能：

 - 解析sass/less文件
 - 解析ES6
 - 解析VUE等框架的模塊
 - 將圖片資源轉(zhuǎn)換為Base64
 - 壓縮文件(html,css,js)
 - 熱更新

安裝：

webpack是node下的一個(gè)模塊，所以安裝webpack需要使用npm。
首先，使用 npm install webpack -g 進(jìn)行全局安裝，這樣才可以在命令行使用webpack命令
項(xiàng)目中，使用 npm init 進(jìn)行文件目錄初始化，然后使用 npm install webpack --save-dev 在本地安裝

起步&&模塊化打包：

webpack的編譯命令可以直接在命令行輸入，但是在項(xiàng)目中，我們使用配置文件來執(zhí)行webpack，所以這里不對(duì)webpack的命令進(jìn)行過多的敘述。webpack的配置文件需要命名為 webpack.config.js ，這樣，在該文件目錄下執(zhí)行 webpck 命令，就可以啟動(dòng)配置文件。

現(xiàn)在，我們?cè)O(shè)定，有這樣的一個(gè)文件目錄：

 -  dist
   -  js
 -  src
   -  script
     -  main.js
   -  style
     -  common.css
 -  index.html
 -  package.json
 -  webpack.config.js

其中，webpack.config.js文件中的內(nèi)容如下：

const path = require('path');

module.exports = {
    entry: './src/script/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[hash]_bundle.js',
        // publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
    }
}

webpack 的配置很簡(jiǎn)單，在理解了各個(gè)參數(shù)的概念和用法后，書寫對(duì)應(yīng)的參數(shù)就可以了

entry用來定義入口文件，分為單入口文件，多入口文件，多頁面應(yīng)用三種應(yīng)用情景
詳情查看：https://doc.webpack-china.org/concepts/entry-points/

output用來進(jìn)行輸出文件的相關(guān)設(shè)置，path屬性規(guī)定輸出文件夾的位置，需要配合node.js下的path模塊使用，filename規(guī)定輸出文件的輸出路徑和名稱，這個(gè)屬性下可以使用 [name]、[hash] 等變量
詳情查看：https://doc.webpack-china.org/concepts/output/

插件&&js文件壓縮&&HTML處理：

plugins屬性用來進(jìn)行插件的相關(guān)設(shè)置
大部分 webpack 的插件和 Loader 都是一個(gè)獨(dú)立的或幾個(gè)互相依賴的npm包，在使用前需要使用 CLI(命令) 進(jìn)行安裝
這里使用到了html-webpack-plugin插件，使用npm install --save-dev html-webpack-plugin安裝
該插件引用一個(gè)入口html文件，進(jìn)行處理后輸出一個(gè)html文件，插件可以完成的處理內(nèi)容包含：

 -  完成對(duì)指定js文件的引用并可規(guī)定文件引用的位置
 -  在入口html文件中定義變量，在webpack中為其賦值
 -  對(duì)html文件進(jìn)行壓縮處理

webpack.config.js中的相關(guān)內(nèi)容如下：
在官網(wǎng)給出的例子中，用到了new webpack.optimize.UglifyJsPlugin()插件，可以對(duì)js文件進(jìn)行壓縮處理
插件部分詳情查看：https://doc.webpack-china.org/plugins/
html-webpack-plugin 詳情查看：https://doc.webpack-china.org/plugins/html-webpack-plugin

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/script/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[hash]_bundle.js',
        // publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
    }，
    plugins: [
        // 將js文件進(jìn)行壓縮
        // new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html', // 規(guī)定模版文件
            filename: 'index.html',     // 規(guī)定文件名
            inject: 'head',          // 規(guī)定js文件引用的位置
            title: 'webpack is good',   // 自定義變量
            // 進(jìn)行html文件壓縮時(shí)的選項(xiàng)
            minify: {
                // removeComments: true,
                // collapseWhitespace: true
            },
            chunk: ['main'],
            // excludeChunks: ['b'] // 引入除了 b 之外的全部模塊
        })
    ]
}

Loader

Loader的功能是文件的轉(zhuǎn)換，譬如將ES6轉(zhuǎn)換為ES5，將sass轉(zhuǎn)換為css等。
使用Loader時(shí)需要將該Loader依賴的npm包下載下來
以 css-loader 和 style-loader 為例：
css-loader 和 style-loader 的功能是將css文件轉(zhuǎn)換為js模塊，頁面可以通過引用該模塊來獲得css樣式
下載： npm install --save-dev css-loader style-loader
配置：

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                include: /src/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }
        ]
    }
}

module.rules下可以配置多個(gè)Loader，test是規(guī)定文件后綴名的正則表達(dá)式，exclude規(guī)定了排除掉的文件夾，include相反，use表明需要使用的loader

更多Loader - babel-loader、postcss-loader、sass-loader、file-loader、url-loader

下面是 babel-loader、postcss-loader、sass-loader、file-loader、url-loader 的配置方式

    module: {
        rules: [
            // {
            //     test: /\.css$/,
            //     use: [{
            //         loader: 'style-loader'
            //     }, {
            //         loader: 'css-loader'
            //     }, {
            //         loader: 'postcss-loader'
            //     }]
            // },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
                }, {
                    loader: "css-loader" // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
                }, {
                    loader: 'postcss-loader'
                }, {
                    loader: "sass-loader" // 將 Sass 編譯成 CSS
                }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: /src/,
                loader: "babel-loader"
            },
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     use: [
            //         {
            //             loader: 'file-loader',
            //             options: {
            //                 outputPath: 'images/'
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 300000,  // 小于300kb則進(jìn)行轉(zhuǎn)換
                            // mimetype: 'image/png', // 指定需要轉(zhuǎn)換的文件的類型
                            fallback: 'file-loader',
                            outputPath: 'images/'
                        }
                    }
                ]
            }
        ]
    }

babel-loader http://babeljs.io/
用來將ES6轉(zhuǎn)化為ES5
需要新建.babelrc文件配置轉(zhuǎn)化的目標(biāo)版本
依賴其他的包

在這里可以查看下面幾個(gè)loader的詳情：https://doc.webpack-china.org/loaders/

postcss-loader 可以對(duì)css進(jìn)行預(yù)解析、兼容性補(bǔ)全、壓縮
需要新建postcss.config.js 文件進(jìn)行配置
依賴postcss-import(支持css文件的引用) 、postcss-cssnext(進(jìn)行兼容性補(bǔ)全)、cssnano(進(jìn)行css壓縮)

sass-loader 可以用來對(duì)sass文件進(jìn)行預(yù)解析

file-loader 將項(xiàng)目中的圖片等資源存放到合理的位置

url-loader 將項(xiàng)目中的圖片等資源按照大小限制，轉(zhuǎn)換為Base64或者啟用file-loader