运行起来dev 环境
- 删除package-lock.json 文件、把package.json devDependencies配置清空 执行 npm install
- webpack.base.conf.js 文件 module lint-loader 检查代码先注释
- webpack.base.conf.js 代码如下面的
...
module: {
rules: {
// ...(config.dev.useEslint ? [createLintingRule()] : []),
...
}
...
}
...
- 报Dev环境更新起来 安装相关包.
[
webpack,
webpack-cli,
webpack-merge,
webpack-dev-server,
vue-loader,
vue-template-compiler,
cache-loader,
sass-loader,
node-sass,
vue-style-loader,
css-loader,
postcss-loader,
url-loader,
babel-loader@7,
babel-core,
babel-polyfill，
babel-helper-vue-jsx-merge-props,
babel-plugin-transform-runtime,
babel-plugin-transform-vue-jsx,
babel-plugin-dynamic-import-node,
babel-plugin-syntax-jsx,
extract-text-webpack-plugin@next,
babel-preset-env,
babel-preset-stage-2,
copy-webpack-plugin,
html-webpack-plugin@next,
friendly-errors-webpack-plugin,
autoprefixer,
postcss-import,
postcss-url,
portfinder,
node-notifier，
cross-env
]
- 报类似下面的错误
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
> <div id="app">
| <router-view/>
| </div>
- webpack.base.conf.js 下面新增下面代码
...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
plugins：[
new VueLoaderPlugin()
...
]
...
- 报类似下面的错误
Module parse failed: Unexpected token (17:13)
You may need an appropriate loader to handle this file type.
| path: '/',
| component: function component() {
> return import('@views/home');
| },
| name: 'Home',
- .babelrc 文件添加plugins配置 dynamic-import-node
- 报错Error: Cannot find module 'file-loader'
- 安装 npm install file-loader --save-dev
- webpack.dev.conf.js 配置 mode: 'development'
运行起来prod 环境
- 在webpack.prod.conf.js配置optimization 代码如下
...
const webpackConfig = merge(baseWebpackConfig, {
...
optimization: {
splitChunks: {
chunks: "all",
},
runtimeChunk: {
name: 'manifest'
}
}
})
...
- 删除webpack.prod.conf.js 里面的plugins 里面关于 CommonsChunkPlugin 和 UglifyJsPlugin、OptimizeCSSPlugin 插件
- 删除ExtractTextPlugin 换成 MiniCssExtractPlugin
- npm install mini-css-extract-plugin --save-dev
- build/utils.js 文件修改如下
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
if (options.extract) {
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: 'vue-style-loader'
// })
[MiniCssExtractPlugin.loader].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}
...
- webpack.prod.conf.js文件 plugins ExtractTextPlugin 配置删除更换成 MiniCssExtractPlugin
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash:8].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
})
]
...
- 执行 npm run build 报错 Cannot find module 'shelljs'
- 安装 shelljs
- 在执行 npm run build 报错 Cannot find module 'ora'
- 安装 ora
- 报下面的错误
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
> <section class="scheme-detail">
| <div class="content" ref="content">
| <!-- 机组报价方案 start -->
- webpack.prod.conf.js 下面新增下面代码
...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
plugins：[
new VueLoaderPlugin()
...
]
...
- 报错Unhandled rejection Error: "dependency" is not a valid chunk sort mode
- 删除webpack.config.js HtmlWebpackPlugin插件配置的里面 chunksSortMode 配置项
- webpack.dev.conf.js 配置 mode: 'production' 执行npm run build 打包成功
- 安装 optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin 配置css 压缩 就是压缩
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: config.build.productionSourceMap,
cache: true,
parallel: true
}),
new OptimizeCSSPlugin()
]
...
}
- 优化optimization.splitChunks 模块分隔配置
- 安装babel-plugin-dynamic-import-webpack
- 配置.babelrc 如下
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", "dynamic-import-webpack"]
}
- 配置optimization.splitChunks
splitChunks: {
chunks: "all",
cacheGroups: {
libs: {
name: 'libs',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
elementUI: {
name: 'element-ui',
priority: 0,
test: /[\\/]node_modules[\\/]element-ui[\\/]/
},
commons: {
name: 'commons',
test: path.join(__dirname, '..', 'src/components'),
minChunks: 3,
priority: -20,
reuseExistingChunk: true
}
}
}
安装eslint 需要的插件
[ babel-eslint, eslint, eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue ]
- webpack.base.conf.js 里面的lint-loader 注释打开
- 执行 npx eslint --fix --ext .js --ext .jsx --ext .vue src/ 结局部分问题
缺陷打包存在提示 WARNING in chunk commons [mini-css-extract-plugin] Conflicting order between:
