![](/img/trans.png)
[英]Using webpack with babel and babel-preset-react and babel-preset-es2015
[英]Webpack 4 doesn't create CSS file without babel-preset-es2015
自升級到Webpack 4和babel-preset-env以來,我遇到了一個奇怪的問題。 當我將es2015
作為預設刪除es2015
,它不會分離css。 除非我包含該預設,否則其他所有內容都會正常編譯,但沒有css文件。
我的.babelrc文件:
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"targets": "> 5%, last 2 versions",
"forceAllTransforms": true
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-object-rest-spread",
["@babel/plugin-proposal-decorators", { "legacy": true, "decoratorsLegacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true}],
[
"module-resolver",
{
"root": [
"./src"
]
}
]
],
"env": {
"development": {
"plugins": [
"react-hot-loader/babel"
]
},
"production": {
"plugins": [
"transform-imports"
]
}
}
}
我的webpack配置:
module.exports = {
mode: 'production',
entry: ['babel-polyfill', path.resolve(__dirname,'./src/index.js')],
output: {
chunkFilename: '[name].[chunkhash:4].bundle.js',
filename: '[name].[chunkhash:4].bundle.js',
publicPath: '/'
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
new CleanWebpackPlugin(['dist/']),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:4].css'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [path.resolve(__dirname, './node_modules/')],
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: false }
}
]
},
{
test: /\.(sass|scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
sourceMap: true
}
}
]
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
keep_fnames: true,
keep_classnames: true,
compress: {
dead_code: true,
drop_console: true
},
mangle: {
keep_fnames: true
}
},
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
],
runtimeChunk: false,
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
},
commons: {
test: /[\\/]node_modules[\\/].*js/,
name: 'vendor',
chunks: 'all',
minChunks: 2
}
},
chunks: 'all'
}
}
};
我可以不管它,但包括es2015
也阻止了正確的塊創建。
我首先要安裝最新的deps,這對於Babel已經在一個新命名空間下npm i @babel/core @babel/preset-env @babel/preset-react babel-loader@latest
和npm un babel-core babel-preset-env babel-preset-react
,也更新.babelrc
以反映"presets": ["@babel/preset-env", ...]
的變化"presets": ["@babel/preset-env", ...]
等。
那么你真正需要做的是將你的兩個plugins
屬性合並為一個...現在你的配置是:
config = {
...
plugins: [],
...
plugins: [],
...
}
第二組插件可能會覆蓋MiniCssExtractPlugin
在這種情況下的解決方案是從我的package.json中刪除"sideEffects": false
。 此外,更改為"sideEffects": ["*.scss", "*.css", "*.sass"]
解決了問題並對最終構建產生了影響。 我的理解是,如果你不使用CSS模塊,在Webpack中導入CSS可以被認為是“副作用”。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.