前端自動化構建之webpack

前言

學了gulp后馬上就開始學了一下webpack，所以馬上來談一下感受，感覺webpack有人說是一個模塊化工具，用來和browserify來做比較，我感覺webpack牛逼多了，不但可以把復雜的文件結構打包在一起，而且還可以預編譯各種js，css語言，同時可以幫你處理好html，感覺和gulp有的一拼

基本介紹

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，把模塊需要的文件打包成一個或多個bundle

裝載

首先install好webpack-cli和webpack，然后在你的根目錄新建一個webpack.config.json的配置文件，webpack的主要配置都在這個里面

使用

webpack來打包簡單的js文件

首先先建兩個互相有聯系的js文件，
然后在配置文件中創建一個module.exports把配置類容引出
定義一個入口參數entry，一個入口文件為一個值，多個入口文件為一個數組
值就是對應的地址
然后添加一個出口參數output，為一個對象，里面有一個filename值為輸出的文件
如：

module.exports = {
    //入口文件
    entry: ['./src/script/main.js', './src/script/a.js'],
    //打包輸出
    output: {
        filename: './dist/js/bundle.[chunkhash].js'
    }
}

其中chunkhash是編譯當前文件的隨機哈希值
然后你可以在js中引入css文件，如

require('./world.js')
//css-loader是讓webpack處理.css文件
//style-loader是讓css文件插入到html里面
//require('style-loader!css-loader!./style.css')
//用了 --module-bind 'css=style-loader!css-loader'后可以不要每次都處理了
require('./style.css')

function hello (argument) {
    alert(argument);
}

hello('hello world');

最后只要在html中引入打包后的文件就好了
還有如果在packge.json里面的scripts里面加入運行webpack的命令如

    "webpack": "webpack --module-bind 'css=style-loader!css-loader'"

以后在命令行中只要運行npm run webpack就好了

webpack對html頁面的生成

前面的demo需要你自己把打包后的文件引入html中，其實也有自動生成html打包后文件的一種方法，加一個plugin（插件）

    plugins: [
        new htmlWebpackPlugin({
            filename: './dist/bundle.index.html',
            template: 'index.html',
            inject: 'head',
            title: 'demo'
        })
    ]

htmlWebpackPlugin是打包后可以直接重新組合html的一個插件
然后如果是單頁面的程序，你可以new一個htmlWebpackPlugin，
如果是多頁面的程序你就需要多new幾個htmlWebpackPlugin
你也可以從配置文件傳參到html頁面，
htmlWebpackPlugin的構造方法中的參數可以在html通過模板語言獲取

<%= htmlWebpackPlugin.options.title %>

你還可以在output中設置publicPath，從而使上線后html中引入外部地址而不只是相對位置
htmlWebpackPlugin也有很多配置，如壓縮html
如果是多頁面多個htmlWebpackPlugin，可以把entry寫成一個對象，然后配置chunks，來指定打包哪個js

webpack打包預處理其他語言

前面只是對html，js，css的打包，而接下來我要介紹的是對各種語言各種文件進行預處理
這里用到的是webpack的Loader
這里先示范對js的處理
你需要把es6代碼編譯成es5的
所以你需要用到babel
npm install babel-loader babel-core babel-preset-env webpack --save-dev
然后你需要配置webpack

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
				query: {
					presets: ['latest']
				}
                //path.resolve(__dirname, )
                //項目運行路徑
                exclude: path.resolve(__dirname, 'node_modules')
            }
        ]
    },

這句配置的意思就是把后綴名為js的文件用babel-loader處理
然后其他配置也是一樣的

結語

我這里只是簡單的對webpack進行簡單的配置，其實還有很多牛逼的配置，以后慢慢學