webpack配置遇到的问题和解决办法

关于css-loader错误问题

参考：https://github.com/webpack-contrib/css-loader/issues/863

该问题是由于css-loader在2.x增加了验证机制，导致转出icon.vue时候抛出错误信息。

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./node_modules/vue-awesome/components/Icon.vue (./node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue-awesome/components/Icon.vue)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

    at validateOptions (/works/aixiujing/web_manager/node_modules/schema-utils/src/validateOptions.js:32:11)
    at Object.loader (/works/aixiujing/web_manager/node_modules/css-loader/dist/index.js:44:28)
@ ./node_modules/vue-awesome/components/Icon.vue (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue-awesome/components/Icon.vue) 4:14-245
@ ./node_modules/vue-awesome/components/Icon.vue
@ ./src/main.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解决办法也很简单，回到1.0.1版本即可。

Yarn remove css-loader

Yarn add css-loader@1.0.1

关于vue-loader错误

参考：https://github.com/symfony/webpack-encore/issues/311

该错误是由于vue-loader中的新版本，没有来得及支持VueLoaderPlugin插件，导致抛出错误信息。

ERROR in ./src/base/core/glob_tag.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.js 30:0-43 31:26-33

ERROR in ./node_modules/vue-awesome/components/Icon.vue?vue&type=style&index=0&lang=css& 240:0
Module parse failed: Unexpected token (240:0)
You may need an appropriate loader to handle this file type.
|
|
> .fa-icon {
|   display: inline-block;
|   fill: currentColor;
@ ./node_modules/vue-awesome/components/Icon.vue 4:0-64
@ ./src/main.js

…


ERROR in ./src/base/time/unix_to_time.vue?vue&type=template&id=73414d04& 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
> <span>{{showTime}}</span>
|
@ ./src/base/time/unix_to_time.vue 1:0-91 10:2-8 11:2-17
@ ./src/page/manager/comment/audit.vue?vue&type=script&lang=js&
@ ./src/page/manager/comment/audit.vue
@ ./src/routers/user/manager/comment.js
@ ./src/routers/user/manager.js
@ ./src/routers/user/user.js
@ ./src/routers/routers.js
@ ./src/main.js

由于错误信息非常巨大，只截取部分。

解决办法是将vue-loader回退到14.2.2版本。

Yarn remove vue-loader

Yarn add vue-loader@^14.2.2

关于es2016问题

由于原生的webpack自带的js转化插件错误，无法转化es2016标准，所以需替换为terser-webpack-plugin插件。

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
}
})],
},
}

其他错误信息

由于错误信息比较复杂，很多都是因为版本不一致，或第三方库增加新机制引起的，这里将贴出所有版本对照信息，方便其他项目建立使用。

"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.26.0",
"cross-env": "^5.2.0",
"crypto-js": "^3.1.9-1",
"css-loader": "1.0.1",
"echarts": "^4.1.0",
"element-ui": "^2.6.1",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"query-string": "^6.4.0",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^1.2.3",
"v-charts": "^1.19.0",
"vue": "^2.6.9",
"vue-amap": "^0.5.8",
"vue-awesome": "^3.4.0",
"vue-loader": "^14.2.2",
"vue-router": "^3.0.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.9",
"webpack": "^4.29.6",
"webpack-dev-server": "^3.2.1",
"whatwg-fetch": "^3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"webpack-cli": "^3.3.0"

Web pack.config.js

let path = require('path');

let webpack = require('webpack');

const TerserPlugin = require('terser-webpack-plugin');



function resolve(dir) {

return path.join(__dirname, '..', dir)

}


module.exports = {

entry: './src/main.js',

output: {

//注意，可能需替换为"/dist"才能正常输出，但为了确保输出目录为根目录下，只能设定为当前值，出现问题后可考虑排查该问题
path: path.resolve(__dirname, './dist'),

publicPath: 'dist/',

filename: 'js/build.js',

chunkFilename: 'js/[name].chunk.js'

},
module: {

rules: [

{
test: /\.css$/,

use: [

'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,

use: [

'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,

use: [

'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [

'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [

'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},
{
test: /\.(png|jpg|gif|svg|woff|ttf|eot|woff2)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}
}
]
},
resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js'

},
extensions: ['*', '.js', '.vue', '.json']

},
devServer: {

historyApiFallback: true,

noInfo: true,

overlay: true

},
performance: {

hints: false

},
devtool: '#eval-source-map',

optimization: {

minimizer: [new TerserPlugin({

terserOptions: {

ecma: undefined,

warnings: false,

parse: {},

compress: {},

mangle: true, // Note `mangle.properties` is `false` by default.

module: false,

output: null,

toplevel: false,

nameCache: null,

ie8: false,

keep_classnames: undefined,

keep_fnames: false,

safari10: false,

}
})],
},
};


if (process.env.NODE_ENV === 'production') {

module.exports.devtool = '#source-map'

// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}
}),
new webpack.LoaderOptionsPlugin({

minimize: true

})
])
}