- 使用Webpack^4.6.0 + React + React-router(配合react-loadable)按需加载,在生产环境打包编译时压缩CSS报错,并且多次打包有时候可以完成,但是打包出来的CSS未压缩,并且有些CSS文件里打包的好像是js代码,通过服务器运行有些样式好像并没有生效?
- 关键webpack配置
const extractCSS = new extractTextPlugin({
filename: 'css/[name].[md5:contenthash:hex:8].css',
allChunks: true
});
const extractSCSS = new extractTextPlugin({
filename: 'css/[name].[md5:contenthash:hex:8].css',
allChunks: true
});
……………………
plugins: [
// 提取CSS文件
extractCSS,
extractSCSS,
// css文件压缩
new optimizeCssPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'babel-loader',
],
exclude: path.resolve(__dirname,' ../../node_modules'),
},
{
test: /\.scss$/,
use: extractSCSS.extract({
use: [
'css-loader',
'postcss-loader',
'sass-loader'
],
fallback: "style-loader",
}),
include: path.resolve(__dirname,' ../../client')
},
{
test: /\.css$/,
use: extractCSS.extract({
use: ['css-loader','postcss-loader'],
fallback: "style-loader",
}),
include:[
path.resolve(__dirname,' ../../client'),
path.join(__dirname, '../../node_modules/antd')
]
},
{
test: /\.(png|jpg|jpeg|png|gif|woff|svg|eot|ttf)/,
loader: 'url-loader?limit=8192&name=[name].[hash:8].[ext]&publicPath=' + webpackFiles.resourcePrefix + '&outputPath='+webpackFiles.resource+'/'
},
{
test: /\.swf$/,
loader: 'file?name=js/[name].[ext]'
},
]
}
});
module.exports = {
plugins: [
require('autoprefixer'),
]
};
{
"presets": [
["es2015",{"loose":true,"modules": false}],
"react",
],
"env": {
"development": {
"presets": ["stage-2","react-hmre"]
},
"production": {
"presets": ["stage-2"],
}
},
"plugins": [
["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css"}],
]
}
- 路由按需加载
/*---------按需加载组件---------------*/
const Index = Loadable({
loader: () => import('../views/index'),
loading: loadingComponent
});
const Detail= Loadable({
loader: () => import('../views/detail'),
loading: loadingComponent
});
const Login= Loadable({
loader: () => import('../views/login'),
loading: loadingComponent
});
const Product= Loadable({
loader: () => import('../views/product'),
loading: loadingComponent
});
const Regist= Loadable({
loader: () => import('../views/regist/regist'),
loading: loadingComponent
});
const Seller= Loadable({
loader: () => import('../views/userInfo/user'),
loading: loadingComponent
});
const UserSet= Loadable({
loader: () => import('../views/userSet'),
loading: loadingComponent
});
- 报错截图

- 另外使用react-loadable按需加载js打包正常,命名可以自己定义吗?求解………………
webpack4+的extractTextPlugin已经被废弃了。代替方案为mini-css-extract-plugin