webpack笔记三 Vue项目使用WebPack配置

Vue项目使用WebPack配置

准确的说是vue-cli中使用webpack配置

参考链接

• Vue-cli webpack 相关 https://cli.vuejs.org/zh/guide/webpack.html

Vue-cli4 生成项目的时候，会自动生成很多配置文件，自带babel语法转换，初始化webpack配置等操作。

Vue ui 创建项目失败时参考链接 https://github.com/vuejs/vue-cli/issues/889

vue --version // 查看vue-cli版本

如babel.config.js配置文件

// 默认babel配置
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

可以自己参考官网 https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage
自己手动实现语法转换，浏览器兼容

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es.promise',
        'es.symbol'
      ]
    }]
  ]
}

Vue-cli默认webpack配置

我使用的Vue-cli4创建的项目，项目根目录下，没有webpack.config.js配置文件。但是可以输出查看

vue inspect                 // 命令行查看Vue默认webpack配置

vue inspect > output.js     // 输出到output.js文件(名字随意)

// 更多关于vue inspect的命令,审查webpack配置语法， 参考以下连接
// https://cli.vuejs.org/zh/guide/webpack.html#%E5%AE%A1%E6%9F%A5%E9%A1%B9%E7%9B%AE%E7%9A%84-webpack-%E9%85%8D%E7%BD%AE

Vue默认webpack配置参数文档

可以看到看到输出的默认webpack配置，也是包含以下几个模块。

• 入口 Entry
• 输出 Output
• 加载解释 Loaders
• 插件 Plugins

// 入口
entry: {
    app: [
      './src/main.js'
    ]
  }
xxx
// 出口文件
output: {
    path: '/xxx/dist',
    filename: 'static/js/[name].js',
    publicPath: '/',
    chunkFilename: 'static/js/[name].js'
  },
xxx

// 各种 Loaders
module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
rules: [
      /* config.module.rule('vue') */
{
test: /\.vue$/,
use: [
  {
    loader: '/xxcjs.js',
    options: {
      cacheDirectory: '/xx/vue-loader',
      cacheIdentifier: '6521430a'
    }
  },

xxx

// plugins

那么如何添加自己的webpack配置选项了？官网有回答

Vue中webpack官网示例

在package.json同级目录下，创建vue.config.js文件

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

Loader链式操作

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

修改插件选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

总结

Vue-cli做了很多事，开发者只需要定制自己需求就行了，特殊的地方就需要自己懂webpack配置就行了，
总体来说webpack配置没什么技巧，对应文档来就行了。到这里webpack基本配置就差不多了。