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实现。