webpack3.0升级4.0记录

一、为什么升级webpack3.0

使用webpack3.0开发构建时非常慢，经常10几秒才能正常编译构建完成，开发效率很低。

4.0有如下优点

1、4.0的treeshaking，代码更轻量，减少冗余代码。

2、使用了splitChunkPlugin, 告别了commonChunkPlugin，代码分割更完善了。

3、引入mode参数

3.1、 production参数：

• 更小的输出尺寸
• 运行时的快速加载代码
• 省略只在开发时的代码
• 不暴露源代码或者路径
• 快捷使用输出assets

3.2、 development参数

• 浏览器内调试更好的工具
• 在一个快速的开发周期，更快的增量编译
• 更好的运行时错误提示

4、构建时间提速98%。

二、安装必要依赖

• webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错

// webpack版本安装4.0
// webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错
npm i -D webpack webpack-cli webpack-dev-server webpack-merge 

// loader重新安装
npm i less less-loader  url-loader   vue-loader webpack-hot-middleware css-loader file-loader  -D 
babel-loader style-loader

// babel 插件重新安装
npm i -D @babel/core  babel-plugin-dynamic-import-node @babel/preset-env  @babel/helper-vue-jsx-merge-props  @babel/plugin-transform-runtime  babel-plugin-istanbul

// element-ui用dll打包后, el-table组件不能展示 不知是不是兼容问题 
// 安装element 
npm i element-ui@2.10.1 -S

// 安装插件
npm i clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin  optimize-css-assets-webpack-plugin  -D

• 包升级 删除package.json的对应包的行 然后执行 npm i xxx -D 升级

// package.json命令

 "scripts": {
   
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:dll": "webpack --config build/webpack.dll.config.js",
    "analyz": "cross-env npm_config_report=true npm run build",
  },
       

三、修改新的配置

1、webpack.base.config.js修改

webpack.DllReferencePlugin是配合dll打包一起使用，提升编译速度，不用重复构建第三方库

'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
const Happypack = require('happypack');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const {
    BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
function resolve(dir) {
   
    return path.join(__dirname, '..', dir);
}

const createLintingRule = () => ({
   
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
   
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
    }
});

const webpackConfig = {
   
    context: path.resolve(__dirname, '../'),
    entry: {
   
        app: './src/main.js'
    },
    output: {
   
        path: config.build.assetsRoot,
 +       filename: '[name].[hash].js',
        publicPath:
            process.env.NODE_ENV === 'production'
                ? config.build.assetsPublicPath
                : config.dev.assetsPublicPath
    },
    resolve: {
   
        extensions: ['.js', '.vue', '.json'],
        alias: {
   
            vue$: 'vue/dist/vue.esm.js',
            '@': resolve('src')
        },
        modules: [path.resolve(__dirname, '../node_modules')]
    },
    resolveLoader: {
   
        modules: [path.resolve(__dirname, '../node_modules')],
        extensions: ['.js', '.vue', '.json'],
        mainFields: ['loader', 'main']
    },
    module: {
   
        rules: [
            {
   
                test: /\.vue$/,
                loader: 'vue-loader',
             +   options: {
   
             +       cacheDirectory: './node_modules/.cache/vue-loader',
             +       cacheIdentifier: 'vue-loader'
             +   },
                include: [resolve('src')]
            },
            {
   
                test: /\.js$/,
                use: [
               +     'cache-loader', // 缓存loader
                    {
   
                        loader: 'babel-loader',
                        options: {
   
                            cacheDirectory: true //缓存目录
                        }
                    }
                ], //必须是数组
                include: [resolve('src')]
            },
            {
   
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
   
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
   
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
   
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
   
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
   
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]'