基于webpack4.x手动实现vue+ts打包配置 -- 基础篇

基于webpack4.x手动实现vue+ts打包配置 – 基础篇

由于vue-cli进入3.0以来，其打包的配置被隐藏到了@vue/cli-service包里，webpack配置的修改只能通过vue.config.js进行。

    "@vue/cli-plugin-babel": "^4.1.2",
    "@vue/cli-plugin-eslint": "^4.1.2",
    "@vue/cli-plugin-typescript": "^4.1.2",
    "@vue/cli-plugin-unit-jest": "^4.1.2",
    "@vue/cli-service": "^4.1.2", //vue-cli脚手架

这种模式虽然极大的简化了开发人员的项目配置，但对于想提升自我的前端来说,无疑是不太友好的。

下面我把自定义webpack配置的经验总结一下,以供参考指正:

虽然webpack配置较为繁杂,但只要掌握了规律,写起配置就没难了,而且webpack经过这几年的发展也有了中文文档

总结起来有四个方面的配置:

• 项目出入口配置
• 文件路径解析配置
• 文件对应的loader配置
• webpack插件配置

---

下面这段(webpack.base.js)配置就是webpack打包入口/出口配置。

...... //省略了各模块的引入
module.exports = {
   
...
  context: path.resolve(__dirname, '../'),
  entry: './src/main.ts',    //打包的入口文件,这里使用了.ts
  output: {
   
    path: path.resolve(__dirname, '../dist'),       //打包后的输出文件
    filename: 'js/[name].js'，//打包后的文件命名规则，这里保持文件名
    publicPath: '/'       //打包后文件的引用路径,默认为当前路径'/'
  },
  target: 'web' // 输出目标浏览器
  .......

常用的自动后缀名和路径别名解析，如下：

resolve: {
   
    //自动识别的文件后缀,比如写 from '@/store',会被依次解析为 '绝对路径/store.mjs/.js等'直到找到文件
  extensions: ['.mjs', '.js', '.ts', '.tsx', '.jsx', '.vue', '.json', '.wasm', '.scss'],
  alias: {
   
    '@': resolve('src'), //src路径别名
    vue$: 'vue/dist/vue.esm.js'
  }
},

往下是webpack最为核心的loader配置，虽然webpack的loader各种各样，但是使用起来十分简单，如这段vue + babel + ts + scss + postcss的loader配置：

module: {
   
  rules: [
    {
   
      test: /\.vue$/,  //正则匹配.vue后缀文件,使用vue-loader这个loader进行解析
      use: [{
   loader: 'vue-loader'}  ]
    },
    {
   
      test: /\.js$/, //正则匹配.js后缀文件,使用babel-loader进行解析
      exclude: /node_modules/,
      use: [