webpack4.0从零开始单页（多页）应用配置(三) --- 辅助工具

webpack4.0从零开始单页（多页）应用配置 (一)
webpack4.0从零开始单页（多页）应用配置(二)

css相关

项目引入Less

安装Less, less-loader

npm install --save-dev less less-loader

修改webpack.config.js loader配置

{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader',
      'less-loader',
    ]
  },

css自动添加前缀

一些css3样式需要添加各个厂家的前缀才能生效，而现在css3运用比较长见，显然我们没必要在每个地方去添加前缀。

安装：postcss-loader 与autoprefixer插件。

npm i --save-dev postcss-loader autoprefixer

根目录下新增postcss.config.js文件，并添加以下代码：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

修改webpack配置如下：

{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader',
      'postcss-loader',
      'less-loader',
    ]
  },

postcss-loader还可以支持许多插件，详情请查看https://github.com/postcss/po...

提取css

webpack4.0已经用mini-css-extract-plugin替代了ExtractTextWebpackPlugin;

以下是官网给出的对比：
Compared to the extract-text-webpack-plugin:

• Async loading
• No duplicate compilation (performance)
• Easier to use
• Specific to CSS

相对在extract-text-webpack-plugin的基础上配置更加简单了，打包速度也得到了提升

安装插件： npm install --save-dev vue-style-loader mini-css-extract-plugin

修改webpack.config.js配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

plugins:[
    ...,
    new MiniCssExtractPlugin({ //提取css
      filename: "[name].css?v=[chunkhash]",
      chunkFilename: "[id].css"
    })
    ...
]

将之前在webpack.config.js里加的css和Less规则移到webpack.dev.js文件中配置如下

{
    test: /\.css$/,
    use: [
      {
        loader: 'vue-style-loader',
        options: {
          fallback: 'style-loader',
          hmr: true,
          reloadAll: true,
        },
      },
      'css-loader',
    ],
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          fallback: 'style-loader',
          hmr: true //热重载
        }
      },
      'css-loader',
      'postcss-loader',
      'less-loader',
    ]
}

同理修改webpack.prd.js

{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          fallback: 'style-loader',
          hmr: true,
          reloadAll: true,
        },
      },
      'css-loader',
    ],
  },
  {
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          fallback: 'style-loader',
          hmr: true //热重载
        }
      },
      'css-loader',
      'postcss-loader',
      'less-loader',
    ]
}

打包时清空dist目录

解决打包后文件目录越来越乱的问题

安装：clean-webpack-plugin

npm i --save-dev clean-webpack-plugin

 new CleanWebpackPlugin({
  cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')], //打包前删除匹配文件
  verbose: true， //是否日志输出
  protectWebpackAssets: false， //不允许删除webpack资产
})

HappyPack

将loader编译单线程变为多线程，从而加快webpack的构建速度

安装HappyPack

npm install --save-dev HappyPack

修改webpack.config.js配置:

const HappyPack = require('happypack');
const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});

module:{
    //忽略其他 ...
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "happypack/loader?id=babel"
            }
        }
    ]
},
plugins: [
   //忽略其他 
   new HappyPack({
      id: 'babel', //与Loader的id对应
      loaders: ['babel-loader?cacheDirectory'],//实际匹配的loader
      threadPool: happyThreadPool, //
      verbose: true
    })
]

想更深入的了解HappyPack happypack 原理解析

optimization

optimization.splitChunks 用于替代commonsChunkPlugin，分离文件，将代码分离成多个文件

webpack.config.js添加如下配置：

  optimization: {
    splitChunks: { //替代之前的commonsChunkPlugin
      chunks: 'initial', //默认async  initial针对初始chunks
      minSize: 50, //切割完后需要新生成的chunk满足大于50kb 否则不生成新的chunk
      minChunks: 2, //两个地方引用后就会提取到chunks里
      maxAsyncRequests: 5, // 最多5个异步请求该Module
      name: 'common' //生成的文件名称
    }
  }

启用热替换模块HotModuleReplacementPlugin

webpack.dev.js增加如下配置

const webpack = require('webpack');
plugins:[
    new webpack.HotModuleReplacementPlugin({})
]

npm run dev 自动打开浏览器地址

修改pacakge.json如下:

"scripts": {
   "dev": "webpack-dev-server --development --open --config ./webpack.dev.js",
   "build": "webpack --production --config ./webpack.prod.js"
}

分离vue文件

在大型项目中引用一些库是很常见的事，由于这些文件基本上是不会变的，所以需要单独分离出来，从而不用在每次发版本之后用户还需要加载此类文件，这里拿vue为例子

• 未分离vue时，可以发现vue被打到Main文件了，导致main.js体积比较大，而main.js在每次发版本之后，后缀是会变的，所以这样会比较消耗性能。

修改webpack.config.js配置

splitChunks:{
  cacheGroups: {
    vueBase: {
      name: 'vueBase',
      test: (module) => {
        return /vue|vuex|vue-router$/.test(module.context); //将vue, vuex, vue-router 匹配的单独打包为vueBase
      },
      chunks: 'initial',
      priority: 10
    },
    common: {
      name: 'common',
      chunks: 'initial',
      priority: 2,
      minChunks: 2
    }
  }
}

执行npm run build

多了一个vueBase文件，将vue的相关提取到单独的文件了

webpack-bundle-analyzer

webpack对项目需要优化，还需要在实战中一步一步的完善，推荐一个插件，可视化webpack打包后的情况，然后自己做出分析看哪儿比较大然后做相对的优化~

安装:

npm i --save-dev webpack-bundle-analyzer

webpack.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 plugins:[
 //忽略
    new BundleAnalyzerPlugin()
  ]

以上基本上就是webpack+vue的一些常用的东西了，基本上可以满足简单项目的一个使用，感谢阅读~如有不足地方请留言讨论(p≧w≦q)

---------------------------------------------------项目源码