手撸 webpack+vue 打包环境

概要

如果我们手动去配置一个webpack+vue的开发环境，这中间不免要使用到各种依赖。下图所示我在本项目中所用到的依赖包在本文章中以代码形式有展示。

如果我们还要使用别的更多依赖，那么我们就要使用更多的依赖。但是这些依赖的开发者不是同一个人，功能各不相同，带来的结果就是依赖的使用方法各有各的风格，每一个都要详尽去阅读他们的文档。于是vue-cli应运而生，简单几步操作就可以搭建出基于vuejs框架的开发环境，特别是vue-cli3还推出可视化操作，让我们的搭建更加快捷。然而在使用vue-cli之后，我们会发现一些瑕疵：打包出错或者不符合预期很难排查出错出、无法升级webpack等一些依赖包。webpack在官方文档中已经声明：他们会不停的优化打包性能，从性能上讲，低版本肯定不如高版本。

所以我就手撸了基于配置文件打包的项目，本项目的代码托管在github上，css预处理使用的是scss（可自行修改），vue、vuex、vue-router、axios、babel等均有配置，有兴趣的朋友可下载下来直接使用。本项目长期维护更新，如有不对的地方请大家issue。

webpack 的配置

大家在阅读webpack文档的时候，推荐大家查看英文文档，而不是中文。因为中文文档并没有及时翻译出来导致文档滞后版本。打包配置文件我们分为三个：webpack.base.js（基本配置）、webpack.dev.js（开发配置）、webpack.prod.js（生产配置），置于项目根部录下build文件夹下面。

webpack.base.js：

const path = require('path');
const pathResolve = filename => path.resolve(__dirname,'../',filename);
const htmlWebpackPlugin = require('html-webpack-plugin'); //文档地址：https://www.npmjs.com/package/html-webpack-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //提取css为外部样式,文档地址：https://www.npmjs.com/package/mini-css-extract-plugin
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader文档：https://vue-loader.vuejs.org/zh/
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); // script标签添加async defer等属性；文档：https://github.com/numical/script-ext-html-webpack-plugin
const WebpackSpritesmithPlugin = require('webpack-spritesmith'); //生成雪碧图 文档：https://www.npmjs.com/package/webpack-spritesmith

const resourcesLoader = {//引入全局scss变量，文档：https://www.npmjs.com/package/sass-resources-loader
    loader: 'sass-resources-loader',
    options: {
        resources: [
            pathResolve('assets/css/mixins.scss')
        ]
    }
};

module.exports = env => {
    const devMode = !!env.development; //是否为开发模式
    const outputFileName = devMode 
                            ? 'js/[name].js' 
                            : 'js/[name].[chunkhash:7].js';

    return {
        entry: pathResolve('src/index.js'),
        output: {
            filename: outputFileName,
            path: pathResolve('dist'),
            publicPath: devMode ? '' : '/dist/'
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },{