乐趣区

webpack40从零开始单页多页应用配置三-辅助工具

jiezi

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)

————————————————— 项目源码

退出移动版