卸载相关包然后重新安装，再根据提示更新相关包
npm uninstall webpack webpack-dev-server webpack-merge -D
npm i webpack webpack-dev-server webpack-merge webpack-cli -D( webpack-cli 4.0新增 一个命令行的包)
-
会出现很多需要升级依赖的提示，和前面一样先卸载然后安装
-
下面是我的工程需要更新的东西
ajv-keywords这个错误暂时忽略无影响
npm uninstall babel-loader extract-text-webpack-plugin file-loader html-webpack-plugin -D
npm i babel-loader file-loader html-webpack-plugin -D
extract-text-webpack-plugin 这个插件已经被废弃
npm i mini-css-extract-plugin官方建议使用这个代替 -
eslint代码检
npm uninstall eslint-config-standard -D
npm i eslint-config-standard@next -D -
stylus 升级
npm uninstall stylus-loader -D
npm i stylus-loader -D -
vue-loader 升级
npm uninstall vue-loader -D
npm i vue-loader -D
webpack 4.0 使用vue-loader 需要导入VueLoaderPlugin -
webpack.base.config.js 更新后
const path = require('path')
//4.0vue-loader需要这个
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const createVueLoaderoptions = require('./vue-loader.config')
const isDev = process.env.NODE_ENV === 'development'
const config = {
// webpack4.0 需要这个 webpack会自动配置
mode: process.env.NODE_ENV || 'production',
target: 'web',
entry: path.join(__dirname, '../client/index.js'),
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, '../dist')
},
module: {
rules: [{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: createVueLoaderoptions(isDev)
},
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
// 忽略已经编译过的js
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: 'resources/[path][name].[hash:8].[ext]'
}
}]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
module.exports = config
不需要的配置删除
devtool: '#cheap-module-eval-source-map'
entry:{
vendor: ['vue'] 这个也不需要了
}
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
// webpack 相关代码打包到一个文件
// 新模块加入给新模块加一个id
// 规避长缓存问题
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
new webpack.NoEmitOnErrorsPlugin()
更新后的webpack.config.client.js
const path = require('path')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入公共配置
const baseConfig = require('./webpack.config.base')
// 2.1 环境变量的设置 区分开发和发布
const isDev = process.env.NODE_ENV === 'development'
// 要加入服务端渲染
// 所以 不加入base
const defaultPlugins = [
// 编译过程中判断 环境 开发环境 错误提示
// 正式环境打包所需的内容 提高程序的运行效率 而不是全部打包
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin() // 把html渲染到页面上
]
const devServer = {
port: 5900,
host: '0.0.0.0', // 可以通过ip访问
overlay: {
// 编译过程出现错误 显示出来
errors: true
},
// historyFallback: {
// },
hot: true
}
let config
if (isDev) {
config = merge(baseConfig, {
module: {
rules: [{
test: /\.styl/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}]
},
devServer,
plugins: defaultPlugins.concat([
// 2.1 启动热加载的插件
new webpack.HotModuleReplacementPlugin()
// ,
// new webpack.NoEmitOnErrorsPlugin()
])
})
} else {
config = merge(baseConfig, {
entry: {
app: path.join(__dirname, '../client/index.js')
},
output: {
filename: '[name].[chunkhash:8].js'
},
optimization: {
splitChunks: {
cacheGroups: { // 这里开始设置缓存的 chunks
commons: {
chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
minSize: 0, // 最小尺寸，默认0,
minChunks: 2, // 最小 chunk ，默认1
maxInitialRequests: 5 // 最大初始化请求书，默认1
},
vendor: {
test: /node_modules/, // 正则规则验证，如果符合就提取 chunk
chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
priority: 10, // 缓存组优先级
enforce: true
}
}
},
runtimeChunk: true
},
module: {
rules: [{
test: /\.styl/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}]
},
plugins: defaultPlugins.concat(
[
// 指定输出内容的名字
new MiniCssExtractPlugin({
filename: '[name].[contentHash:8].css'
// chunkFilename: 'css/app.[contentHash:8].css'
})
]
)
})
}
module.exports = config
脚本命令配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
"build": "npm run clean && npm run build:client",
"clean": "rimraf dist",
"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
"precommit": "npm run lint-fix"
}
网友评论