webpack配置详解

前面的一章讲了在windows10下搭vue+webpack的开发环境。这一章就讲一下环境搭好后如何配置webpack的配置文件。虽然可以用vue-cli直接创建vue项目，但由于是新手我还是建议从基础的配置文件入手，对我们理解webpack是很有好处的。
1、首先建一个名叫“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生成的配置
    }
};

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

在这里我们可以注意到最新引用的path，它主要作用就是处理路径，2个常用的方法是path.join(path1[, ...])和path.resolve([from ...], to)。就我的理解join就是拼接2个字符。好比在一个路径下添加一个文件，resolve在某个路径找某个文件。

二、入口文件配置-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>为名字的文件的内容。

三、出口文件配置-output

现在我也只用过最基础的，以后补充。其中的属性：path（打包后的文件存放位置）、publicPath用于存放静态资源文件路径，用于：href、url（）；

四、打包

之前我们就说过作为入口配置的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
        })
    ]
};

五、自定义模板
从上面看我们可以看出js可以根据配置自动生成，那么html可以根据模板自动生成吗？里面可以配置我们需要引用的js而不必要手动添加。具体的明天再说了，提示：可以用插件html-webpack-plugin实现。