从零搭建一个VueCLI （2）

接着上一篇接着说，babel7 引入了按需加载，他的值根据 .browserslistrc 范围来决定，同时 autoprefixer 插件也是一样，定义的方法有两种,一种是在 package.json 文件内，另外一种作为单独的文件，为了方便管理，下面的所有配置都是单独的文件

> 1%
last 2 versions
复制代码

上面的意思是说，大于 1%，浏览器的两个版本，具体范围可以查阅文档

处理其他资源

1.字体

yarn add file-loader -D
复制代码

{
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'font/[name].[ext]'
            },
          },
        ],
      },
复制代码

2. 图片 对于小于 10KB 的图片将其转化 base64

yarn add url-loader -D
复制代码

{
          test: /\.(png|jp?g|gif)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10 * 1024,
              name: 'img/[name].[ext]'
              },
            },
          ],
        },
复制代码

可以根据项目需求决定是否添加图片压缩功能。

热重载

const webpack = require('webpack');
{
 devtool: 'inline-source-map',
  devServer: {
    // ...其他代码
    hot: true,
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
}
复制代码

devtool 是方便开发模式调试错误信息，生产环境为了速度可以关闭。

静态资源

yarn add copy-webpack-plugi -D
复制代码

因为开发环境是写入内存中，所有我们要修改 webpack.dev.js 的 devServer.writeToDisk 选项，之后将 public 的 index.html 文件过滤掉。

因为开发环境的 dist 文件夹已经存在，所以我们需要找一个临时文件夹，在每次运行的时候将将文件写入，同时 CleanWebpackPlugin 插件也要调整到 webpack.common.js 文件下。

webpack.dev.js

output: {
    path: path.resolve(__dirname, "../node_modules/@temporary")
  },
复制代码

webpack.common.js

plugins: [
    // 清理文件夹
    new CleanWebpackPlugin(),
    new CopyPlugin([
      {
        from: path.resolve(__dirname, "../public"),
        to: path.resolve(__dirname, "../dist"),
        // 忽略文件
        ignore: ['index.html'],
      },
    ]),
  ],
复制代码

这样实现复制之后，我们将 icon 通过 <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> 导入

css 代码压缩

css 代码压缩可以通过 postcss 的插件 cssnano 来实现

yarn add cssnano -D
复制代码

module.exports = {
  plugins: {
    // ...其他代码
    ...(process.env.NODE_ENV !== "production" ? {} : { cssnano: {} })
  }
};
复制代码

其他优化

resolve: {
    alias: {
      '@': path.resolve(__dirname, "../src"),
    },
  },
复制代码

• 美化输出信息

// 控制输出信息
    stats: {
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false,
      entrypoints: false,
    },

复制代码

• 去除 debugger 和注释

plugins: [
   // ...其他
    new UglifyJSPlugin({
      exclude: /node_modules/,
      cache: true,
      parallel: true,
      sourceMap: true,
      // 多嵌套了一层
      uglifyOptions: {
        warnings: false,
        compress: {
          drop_console: true,
          // 内嵌定义了但是只用到一次的变量
          collapse_vars: true,
          // 提取出出现多次但是没有定义成变量去引用的静态值
          reduce_vars: true,
          drop_debugger: true,
        },
        output: {
          // 是否最紧凑的输出
          beautify: false,
          // 是否删除所有的注释
          comments: false,
        },
      },
    }),
  ],
复制代码

• 代码分割 具体根据需求调整

splitChunks: {
      chunks: 'async',
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: 10, // 优先级
          reuseExistingChunk: false, // 允许复用已经存在的代码块
          test: /node_modules\/(.*)\.js/, // 只打包初始时依赖的第三方
        },
        common: {
          name: 'common',
          chunks: 'initial',
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    }
  },
复制代码

• 命名 webpack：hash、chunkhash、contenthash 三者区别 , 对于 js 文件推荐使用 chunkhash,css 文件使用 contenthash

最后

做到这里，基本脚手架 工具 可以使用了，还有一篇文章，主要介绍可配置性和界面优化。