关于webpack提取scss并转换为CSS打包压缩?

怀念不能 2018-06-03 11:39:55
1. 使用Webpack^4.6.0 + React + React-router(配合react-loadable)按需加载,在生产环境打包编译时压缩CSS报错,并且多次打包有时候可以完成,但是打包出来的CSS未压缩,并且有些CSS文件里打包的好像是js代码,通过服务器运行有些样式好像并没有生效?
2. 关键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]'
},
]
}

});

post.config.js

module.exports = {
plugins: [
require('autoprefixer'),
]
};


.babelrc


{
"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"}],

]
}


3. 路由按需加载


/*---------按需加载组件---------------*/
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
});

4.报错截图

5.另外使用react-loadable按需加载js打包正常,命名可以自己定义吗?**求解………………**
...全文
1260 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
授课特色:  由浅入深,情景教学、案例教学作为一个现代javascript 应用程序的静态模块打包器,webpack能将各种资源,如js,css, 图片等作为模块来处理,是当下前端工程化的一个很受欢迎的工具,webpack目前最新的版本是4.0。       Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。       Webpack已经是大部分前端项目打包工具,比如最热门前端框架之一React,用它开发的项目都是用webpack进行模块化管理和打包。1、webpack工具的安装2、服务安装与启动3、html打包3,布局图片打包4、内容图片打包5、ES6打包   webpack-热门的模块加载器兼打包工具webpack介绍webpack作用browerify和webpack的区别webpack的安装webpack编译第一个例子loader加载其他类型文件webpack.config.js用其他名字的配置文件生产环境编译开发环境编译监听文件变化生成source-mapbabel配置babelrc文件的作用webpack-dev-server端口号更改热重载、实时刷新

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧