记一次webpack升级的踩坑之旅

webpack.jpeg

最近抽空将公司的一个基于vue的BI后台项目做了一次webpack升级，因为考虑到webpack3出来的时间并不长，所以决定还是先将其升级为2.7的版本，期间也遇到了一些问题，在这里与大家做一些分享，共同学习😊😊。

官方文档的链接地址
升级时按照官方文档(以下简称 文档)中所列出的demo一项一项进行，大部分问题应该都可以解决，公司的项目主体结构是用vue-cli生成的，所以下面👇就主要说一下vue-cli的webpack配置升级至2.x的一些步骤吧🤔🤔~

关于vue-cli的webpack配置细节在这里就不多说了，想要了解的推荐可以看看这篇文章：Vue-cli创建vue项目以及配置文件梳理

先来看看 webpack.base.conf.js

我的配置文件里有这样一段

//webpack 1.x
resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
        'src': path.resolve(__dirname, '../src'),
        'assets': path.resolve(__dirname, '../src/assets'),
        'components': path.resolve(__dirname, '../src/components')
    }
}

根据文档中所提到的

1.resolve.root, resolve.fallback, resolve.modulesDirectories这些选项被一个单独的选项 resolve.modules取代。
2.resolve.extensions此选项不再需要传一个空字符串。

所以可以将上述代码块改为👇

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}
resolve: {
    extensions: ['.js', '.vue'],
    modules: [
        resolve("node_modules")
    ],
    alias: {
        'src': path.resolve(__dirname, '../src'),
        'assets': path.resolve(__dirname, '../src/assets'),
        'components': path.resolve(__dirname, '../src/components'),
        'vue$': 'vue/dist/vue.common.js',
        'utils': path.resolve(__dirname, '../web_modules/utils'),
        'web_modules': path.resolve(__dirname, '../web_modules'),
    }
},

PS:如果你在webpack1.x中使用了web_modules这样的文件路径，在打包时webpack1.x会自动将web_modules中被用到的库进行封装。然而2.x并不会这样，打包时会报路径找不到的错误。你可以在resolve.alias中自定义一个路径的映射，就像上面那样👆

接下来是module模块，

module.loaders 改为 module.rules
在引用 loader 时，不能再省略 -loader 后缀
query改为options

//1.x
module：{
    loaders:[
        {
            test: /\.vue$/,
            loader: 'vue'，
            query:{}
        }
        ...
    ]
}

//2.x
module：{
    rules:[
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            include: [resolve('src')],
            options:{}
        }
        ...
    ]
}

再来看看webpack.dev.conf.js的相关更改

同样的，涉及到一些module.loaders => module.rules的更改，不再赘述。
接下来，

OccurrenceOrderPlugin 现在默认启用，并已重命名（在 webpack 1 中为 OccurenceOrderPlugin）。 因此，请确保从您的配置中删除该插件

只需要找到下面👇这行代码，删除即可

new webpack.optimize.OccurenceOrderPlugin()

NoErrorsPlugin这个插件在2.x中已经弃用，取而代之的是NoEmitOnErrorsPlugin (如果不改用该插件的话，打包时会有警告)

我们继续将

new webpack.NoErrorsPlugin() 
替换为  
new webpack.NoEmitOnErrorsPlugin()

继续看webpack.prod.conf.js

首先去掉这样一段代码，2.x已经不需要这样的配置

  vue: {
    loaders: utils.cssLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },

UglifyJsPlugin 的 sourceMap 选项现在默认为 false 而不是true。这意味着如果你在压缩代码时启用了 source map，或者想要让 uglifyjs 的警告能够对应到正确的代码行，你需要将 UglifyJsPlugin 的 sourceMap 设为 true。
UglifyJsPlugin 的 compress.warnings 选项现在默认为 false 而不是 true。
这意味着如果你想要看到 uglifyjs 的警告信息，你需要将compress.warnings 设为 true。

增加如下代码配置👇

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    },
    sourceMap: true
}),

需要注意的是，webpack升级到2.x之后，之前如果用到extract-text-webpack-plugin的插件，也要对应的升级至2.x版本，并且对应的将配置代码改为下面这样👇

new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css'))
改为
new ExtractTextPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css')
}),

接下来是utils.js文件

就像在 webpack 1 中，loader 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader。
使用 rule.use 配置选项，use 可以设置为一个 loader 数组。 在 webpack 1 中，loader 通常被用 ! 连写。
这一写法在 webpack 2 中只在使用旧的选项 module.loaders 时才有效。

因为链式调用的更改，在utils中的cssLoaders方法也需要进行更改：

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

升级进行到这里，相信大部分人已经可以正常的将项目跑起来了，如果你的项目已经可以正常运行并且可以在浏览器中打开，那么就可以忽略下面的内容了👏，如果还有一些奇奇怪怪的js报错，那么我们继续🤓🤓🤓~

我进行到这里后，打包已经完全正常(没有任何报错)，但是在浏览器打开时，会报出这样的错误

Uncaught SyntaxError: Unexpected token :
Uncaught ReferenceError: development is not defined

细心查看之后发现，这个错误是因为在使用预设的环境配置时，语法出现了问题，尝试了多次之后，找到下面的解决办法🙄。

你的config文件夹中会有这样两个文件dev.env.js和prod.env.js，一般会在这个文件里面针对生产环境、线上环境来做一些不同的环境配置，如api的域名，cdn的地址等等。

我的dev.env.js文件中会有这样一段代码(prod.env.js类似):

module.exports = merge(prodEnv, {
  NODE_ENV: 'development',
  PLAT_FORM:platform,
  CYZS:{
    host:'xxxxxxx',
    platform:platform
  }
})
将上面的代码略作修改，如下:
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  PLAT_FORM:platform,
  CYZS:{
    host:'"xxxxxxxxxx"',
    platform:platform
  }
})

细心的你可能会发现，两段代码的区别仅仅只在于给两处用到字符串的地方
NODE_ENV: 'development'，host:'xxxxxxx'
多加了一层引号，即:
NODE_ENV: '"development"'，host:'"xxxxxxxxxx"'
是的，仅此而已🤔~

然后我们再回到webpack.dev.conf.js中(webpack.prod.conf.js同理)，找到下面这段代码👇

new webpack.DefinePlugin({
      'process.env': JSON.stringify(config.dev.env),
        CYZS:JSON.stringify(config.dev.env.CYZS)
}),
改为:
new webpack.DefinePlugin({
      'process.env': config.dev.env,
        CYZS:JSON.stringify(config.dev.env.CYZS)
}),

---

OK，到这里基本上就是这次升级所经历的所有过程了，有不正确的地方欢迎小伙伴们指出🤣🤣，webpack的细节还是挺多的，里面应该还有很多可以优化的点，后面在开发过程中可能会陆续进行优化，遇到比较经典的应该还会在这里与大家进行分享(如果我没有忘记的话🙄🙄)
头一次写博文，吭哧吭哧的码了半天，终于算是码完了🤓。嗯，我先去躺一会~