摘要：这两天一直在练习这个发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神在配置上其实是可以是想和的，会根据进行对打包，压缩，下面自动压缩，亲测没有问题但是从里面分离出来的怎么打包呢我找了一天的相关
这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！
webpack4 在配置上其实是可以是想production和development的，
// webpack.config.js
module.exports = {
// webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，亲测没有问题
mode: "development" // production
}
但是从js里面分离出来的css怎么打包呢？
我找了一天的相关文章，好多都是说webpack自动支持css压缩，有的是说需要插件，对，就是用插件
optimize-css-assets-webpack-plugin
不过一定要看Npm官方网站
⚠️ For webpack v3 or below please use optimize-css-assets-webpack-plugin@3.2.0. The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.
做法是先安装 optimize-css-assets-webpack-plugin
const optimizeCss = require("optimize-css-assets-webpack-plugin");
module.exports = {
.....,
//
plugins: [
new optimizeCss({
assetNameRegExp: /.style.css$/g,
cssProcessor: require("cssnano"),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
],
// 这个还待研究，看字面意思是优化的意思
optimization: {
// minimize: true,
minimizer: [new optimizeCss({})],
}
}
以上里面的代码我也是看别人写的，所以还需要安装一个"cssnano"的包
之后运行生产环境打包命令，哦也，css果然压缩了，但是看js，居然没有被压缩，不加上述代码的话js确实是默认压缩的，于是网上又找解决方案，都说webpack4只要设置mode production即可，但是现在有个问题，压缩了css之后js就不会压缩，于是带着试试看的心里继续安装之前压缩Js的插件 uglify-webpack-plugin
最后发现问题解决了，只是我的心得，也是误打误撞，但如果有好的解决方案请大家积极留言，共同进步，把webpack吃透！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113295.html
摘要：的生产环境优化完整配置的可以参考本文主要介绍了生产环境我都做了哪些优化文章的结构如下静态资源路径。分配不同的关于稳定性的坑注意区分整个项目有变动时，变化。而生产环境可以这一项，因为我们不需要在生产环境调试代码。 webpack4 的生产环境优化 webpack4完整配置的可以参考： https://github.com/ziwei3749/... 本文主要介绍了 webpack4 生产...
摘要：然后运行会发现文件夹中生成了和，文件内容如下测试哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈内容如下说明已经打包成功，此时运行，即可看到原文件中的内容 webpack4.16压缩打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多几个月就会出一版，最新的4系列对webpack2和webpack3进行...
摘要：然后运行会发现文件夹中生成了和，文件内容如下测试哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈内容如下说明已经打包成功，此时运行，即可看到原文件中的内容 webpack4.16压缩打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多几个月就会出一版，最新的4系列对webpack2和webpack3进行...
摘要：然后运行会发现文件夹中生成了和，文件内容如下测试哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈内容如下说明已经打包成功，此时运行，即可看到原文件中的内容 webpack4.16压缩打包 本文所用插件版本如下： nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快，差不多几个月就会出一版，最新的4系列对webpack2和webpack3进行...
摘要：特性比较热门的两大特性，零配置和速度快号称提速上限一般情况下，相比于低版本，场景下第三方依赖打包速度和场景下本地服务首次启动速度都得到显著提升零配置通过指定当前场景为开发模式还是生产模式，自动设置好当前场景的默认配置，用户即可马上使用，不需 webpack4特性 webpack4比较热门的两大特性，零配置和速度快（号称提速上限98%） 一般情况下，webpack4相比于低版本，prod...
阅读 3717·2021-10-11 10:59
阅读 1298·2019-08-30 15:44
阅读 3478·2019-08-29 16:39
阅读 2884·2019-08-29 16:29
阅读 1799·2019-08-29 15:24
阅读 806·2019-08-29 15:05
阅读 1262·2019-08-29 12:34
阅读 2300·2019-08-29 12:19
