从零配置webpack4

从零配置webpack4

十月 09, 2018

有机会搭建一个全新的项目,类似移动端门户网站的那种。然后Vue-cli各种问题。反正有时间,所以想从头搭建一个,刚好可以学习一下。

计划

第一步肯定要好好想想,技术的选型。

  • Vue + Vue-router + axios + Vuex + webpack4
  • sass
  • mint UI
  • eslint
  • 单元测试(次要)

没有选择Typescript

关于webpack,需要

  • js混淆压缩,去除死代码
  • js公共代码分离打包
  • sass转换、css分离、合并、压缩
  • 打包分析
  • 支持vue单文件
  • 静态资源

项目中要支持

  • 路由拦截
  • 接口封装

步骤

建目录结构

建webpack配置

新建两个webpack配置文件,一个用于本地调试(webpack.dev.js),另一个打包上线(webpack.pro.js)

写入基本的配置:entry、output、module、plugins;

dev

dev模式只需要最基本的配置:copy-webpack-plugin、html-webpack-plugin、vue-loader、sass-loader等必须的功能。为了打包速度,其余代码压缩、css抽离等都不需要;

dev额外的需要配置webpack-dev-server,然后再package.json文件里script字段里加上一句:webpack-dev-server --config build/webpack.dev.js就能跑起来了。

dev还要一个额外的配置:devtool方便开发调试时可以看到源码。

pro

所有优化的项目都该下上去

package.json script里加上"build": "webpack --config build/webpack.pro.js"

安装webpack、webpack-cli和其他相关依赖即可

关于loader

样式loader

关于css的几个loader,官网的注释是:

"style-loader", // 将 JS 字符串生成为 style 节点
"css-loader", // 将 CSS 转化成 CommonJS 模块
"sass-loader", // 将 Sass 编译成 CSS,默认使用 Node Sass

没什么特别的。注意顺序就好。如果处理的是.css,则去掉sass-loader

安装 style-loader、css-loader、sass-loader;

抽离公共css

生产环境需要抽离css,所以用到mini-css-extract-plugin(webpack旧版本用的是extract-text-plugin),而mini-css-extract-pluginstyle-loader是冲突的,所以生产版本的css loader配置应该是:

MiniCssExtractPlugin.loader,
// "style-loader", // 将 JS 字符串生成为 style 节点
"css-loader", // 将 CSS 转化成 CommonJS 模块
"sass-loader", // 将 Sass 编译成 CSS,默认使用 Node Sass

postcss-loader

postcss-loader是功能比较强大的css预处理loader,但是我暂时只需要它的autoprefix前缀功能。

生产环境下,在css-loader前加上postcss-loader

然后在项目根目录新建文件:postcss.config.js。里面可以细粒化的配置postcss。

module.exports = data => ({
    // parser: this.webpack.resourcePath.endsWith('.css') ? 'sugarss' : false,
    // 这里应该是“sugarss”,但是sugarss不能处理sass,所以不能写
    parser: false,
    plugins: {
        'postcss-cssnext': {},
        'autoprefixer': {},
        'cssnano': data.env === 'production' ? {} : false
    }
});

然后根据报错依次安装sugarss、postcss-cssnext、autoprefixer、cssnano即可。

postcss-loader是个大项,可以好好学学

babel-loader

babel-loader是把js的ES6以上的语法转换为ES5语法的loader,为了前端的浏览器兼容性,还有可以在开发的时候大胆的用上新语法,babel还是必不可少的。

虽然在网上好多文章都要给loader写很多配置,但是目前我构建的(babel-loader版本8.0.5)来看,不需要任何额外的配置(只填了cacheDirectory: true)。只要webpack中指定了babel-loader,则babel会自动找到.babelrc文件,读取其配置。在babel的配置文件里配置babel即可。

1
2
3
4
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-syntax-dynamic-import"] // 支持动态路由 import('')语法
}

可能是最新版内置了很多默认配置吧

然后根据需求、报错安装与配置指定配置即可

vue-loader

vue开发中绝对少不了vue单文件。而vue-loader就是把.vue文件转换为js的loader。同时还包括自动处理资源路径、scoped css功能。

在这次安装的14.2.2版本的配置貌似也是很自动化的,会根据lang属性自动识别其他已经配置的loader而自动转换。(<template>应该会自动走vue-template-compiler,script,应该会匹配.js后缀的loader)

新版本15.0.0之后的版本貌似就不会那么智能了,需要手动配置很多东西。略。

关于plugins

关于optimization

jest 单元测试

https://vue-test-utils.vuejs.org/zh/guides/testing-single-file-components-with-jest.html

安装jest、@vue/test-units、vue-jest