webpack配置詳解

前面的一章講了在windows10下搭vue+webpack的開發環境。這一章就講一下環境搭好後如何配置webpack的配置文件。雖然能夠用vue-cli直接建立vue項目，但因爲是新手我仍是建議從基礎的配置文件入手，對咱們理解webpack是頗有好處的。
一、首先建一個名叫「webpack.config.js」文件，在裏面寫webpack的配置信息。以前的文章我就已經寫過一個簡單的例子：

let path = require('path');
let webpack = require('webpack');
module.exports = {
   //入口文件配置
    entry: {
        index: path.resolve(__dirname, 'src/js/page/index.js')
    },
    //出口文件配置
    output: {
        path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
        publicPath: '/dist/',                //模板、樣式、腳本、圖片等資源對應的server上的路徑
        filename: 'js/[name]-[hash].js',            //每一個頁面對應的主js的生成配置
        chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk生成的配置
    }
};

1、path = require('path')理解

在這裏咱們能夠注意到最新引用的path，它主要做用就是處理路徑，2個經常使用的方法是path.join(path1[, ...])和path.resolve([from ...], to)。就個人理解join就是拼接2個字符。比如在一個路徑下添加一個文件，resolve在某個路徑找某個文件。

2、入口文件配置-entry

基本形式：entry:{key:value},其中key對應的是output中的[name]。key能夠爲簡單的字符串如：app，index等；也能夠爲路徑如：src/js/page/index.js。value能夠爲簡單的字符串如路徑；也能夠爲數組，數組中的文件通常是沒有相互依賴關係的，可是又處於某些緣由須要將它們打包在一塊兒。
其中對於數組的做用：咱們會將第三方npm包，通常咱們不會進行修改並且它們之間也不存在依賴，因此咱們通常會將它們打包在一塊兒。例如：

module.exports ={
    entry: {
        index: path.resolve(__dirname, 'src/js/page/index.js'),
        vendors: ['vue', 'vue-router','vue-resource','vuex']//第三方npm包，通常咱們不會進行修改，因此只要打包一次，以後build的時候不須要打包
    },
    output: {
        path: path.join(__dirname, 'dist'),//__dirname指的就是根路徑
        filename: '[name].dll.[hash].js',
        library: '[name]_library'
    }
};

上面entry的寫法也是多入口的一種寫法，最後會在dist下生成2個js文件：index.js和vendors.js。但這時候你又會發現每次有地方修改的話無論index仍是vendors的hash值都會發生變化，但明明vendors.js中沒有作過任何的改變。這樣的話，對於緩存不就沒有任何做用了並且每次打包也浪費時間。具體優化咱們下面再說。
我認爲key和value的對應關係：key對應輸出文件的名字和路徑，value是一個真實存在的文件，其裏面的內容經過編譯後成爲以<key>爲名字的文件的內容。

3、出口文件配置-output

如今我也只用過最基礎的，之後補充。其中的屬性：path（打包後的文件存放位置）、publicPath用於存放靜態資源文件路徑，用於：href、url（）；

4、打包

以前咱們就說過做爲入口配置的js每次改動都會所有打包，但一些第三方的文件咱們但願一次打包好了以後就不可用打包了，這樣既節省時間也有利於緩存。這裏咱們就要用到DllPlugin。用DllPlugin咱們能夠將要打包的文件成一個有路徑和具體信息的json文件，用的時候用DllReferencePlugin當插件引進去就行。在根目錄下新建一個webpack.dll.config.js文件和webpack.config.js文件同級。下面能夠看個人註釋：

/*webpack.dll.config.js文件*/
const path = require('path');
const webpack = require('webpack');
const AssetsPlugin = require('assets-webpack-plugin');

module.exports ={
    entry: {
        vendors: ['vue', 'vue-router','vue-resource','vuex']//第三方npm包，通常咱們不會進行修改，因此只要打包一次，以後build的時候不須要打包
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].dll.[hash].js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            /**
             * path
             * 定義 manifest 文件生成的位置
             * [name]的部分由entry的名字替換
             */
            path: path.join(__dirname,'dist', '[name]-manifest.json'),//[name]-manifest爲要導出文件的名字
            name: '[name]_library'//這裏的name與導出的manifest.json相同
        })
    ]
};

而後執行：webpack --config webpack.dll.config.js後會在dist目錄下產生vendors-manifest.json文件。而後在webpack.config.js引用，以下：

const path = require('path');
const webpack = require('webpack');
const bundleConfig = require(path.resolve(__dirname, 'dist/bundle-config.json'));
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //入口文件配置
    entry: {
        index: path.resolve(__dirname, 'src/js/page/index.js')
    },
    //出口文件配置
    output: {
        path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
        publicPath: '/dist/',                //模板、樣式、腳本、圖片等資源對應的server上的路徑
        filename: 'js/[name]-[hash].js',            //每一個頁面對應的主js的生成配置
        chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk生成的配置
    },
    plugins: [
        new webpack.DllReferencePlugin({//manifest限制打包
            context: '.',
            manifest: require(path.resolve(__dirname, 'dist/vendors-manifest.json'))//引入vendors-manifest.json
        })
    ]
};

5、自定義模板
從上面看咱們能夠看出js能夠根據配置自動生成，那麼html能夠根據模板自動生成嗎？裏面能夠配置咱們須要引用的js而沒必要要手動添加。具體的明天再說了，提示：能夠用插件html-webpack-plugin實現。