提醒一下:webpack 4.x 中 cli功能从webpack移到了webpack-cli,所以如果你要使用cli功能,除了安装 webpack 外,还需要安装 webpack-cli 。
webpack 4.x 使用extract-text-webpack-plugin插件
extract-text-webpack-plugin 提取css单独打包文件支持到webpack 3.x,如果在webpack 4.x中使用会报错,可以使用在安装的时候 extract-text-webpack-plugin@next 解决,也可以使用 mini-css-extract-plugin 插件。
- mini-css-extract-plugin的使用如下
const MiniCssExtractPlugin = require("mini-css-extract-plugin") ;
const config = module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[chunkhash:8].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
module.exports = config
使用babel 8.x
注意点:安装babel的时候会默认帮你安装最新的版本,但这时候很多的babel插件会出现兼容的问题,不如不能使用babel-core,而使用@babel/core,等等。
以下的替换在使用 7.x (含7以上)
babel-core
替换为@babel/core
|- 因为babel-core支持到 babel 6.x, 如果使用 6.x 以上则需要修改,而且不可以两个都安装,可能会出现冲突的问题。babel-preset-*
替换为@babel/preset-*
|- 比如使用 babel-preset-env 则需要换成 @babel/preset-env,在 .babelrc 配置文件中的"presets": ["env"]
也需要修改为"presets": ["@babel/preset-env"]
。babel-plugin-*
替换为@babel/plugin-*
|- 比如使用babel-plugin-transform-runtime
则需要替换为@babel/plugin-transform-runtime
; .babelrc配置文件也要相应的修改。
简单案例
- webpack.config.js
var path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css'
})
]
}
- package.json
"devDependencies": {
"@babel/core": "^7.5.0",
"@babel/plugin-transform-runtime": "^7.5.0",
"@babel/preset-env": "^7.5.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5"
}
- .babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}