webpack4之踩坑总结

Posted xieqian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4之踩坑总结相关的知识,希望对你有一定的参考价值。

一、先放上项目目录结构

技术分享图片

二、问题总结

 1、关于process.env.NODE_ENV问题

刚开始的时候,我想在配置文件中使用到这个环境变量,却发现一直获取不到值,晕晕晕,查了资料才知道,这个环境变量是给除配置文件之外的文件使用的。

因为我需要在webpack.base.conf.js配置文件中区分是开发环境还是生成环境,于是我做了如下处理:

// 第一:在我的npm脚本中加入--mode=production来确定这是生产环境
"build": "webpack --mode=production --config ./build/webpack.prod.conf.js --color --progress"
// 第二:通过process.argv判断是否存在标识--mode=production来区分开发环境和生产环境
const isProduction = process.argv.indexOf(‘--mode=production‘) > -1;

 2、关于clean-webpack-plugin插件清除文件问题

// 刚开始的时候我只是这样做了一个简单的配置,以为可以生效
// 然而,然并乱
new CleanWebpackPlugin(‘dist‘)

 

// 之后在阅读了插件源代码和编译提示之后,才找到问题所在(ps:源代码量不多)
// 第一:该插件只会清除插件所在文件夹下的子文件
// 第二:由于我的配置文件是在build目录下,所以插件的根目录在build文件夹
// 第三:因为我要删除的dist文件夹是build的兄弟目录,所以插件会跳过跳过跳过删除操作
// 综上所述,正确的操作是:设置项目根目录为插件的根目录
new CleanWebpackPlugin(‘dist‘, {
    root: path.join(__dirname, ‘../‘)
})

 

3、关于extract-text-webpack-plugin提取css问题

刚开始我的配置是这样子的,忽视了我的配置是多入口的。在我打包出来之后,我的一部分css代码被提取出来的,而我配置成css module的代码却一直没有提取出来,因为这个问题,我找了一个晚上还是没有找出问题所在。

new ExtractTextPlugin("styles.css")

 

直到,我在webpack文档中我看到了这样的一段话:

警告: ExtractTextPlugin 对 每个入口 chunk 都生成一个对应的文件,所以当你配置多个入口 chunk 的时候,你必须使用 [name], [id] 或 [contenthash]

 

从这个时候我才明白,之所以存在“只提取部分代码的问题“,是因为我只设置了一个文件,导致了文件内容覆盖,后面入口文件提取出来的css覆盖了前面入口文件提取出来的css。

哭晕在厕所。。。

// 正确的操作如下:
new
ExtractTextPlugin({ // 如果需要加上文件目录‘css/[name].css‘,则需要考虑css里面应用文件相对目录问题 filename: ‘[name].css‘, allChunks: true })

 

4、关于css文件压缩问题

刚开始,我用了css-loader提供的minimize选项,不可能的,这辈子都不可能完成压缩的

{
loader:
‘css-loader‘, options: { minimize: true } }

 

查了资料才发现,原来css-loader已经在新版本已经移除了minimize这个压缩选项,而推荐了其他的方案:

use postcss-loader with cssnano
use optimize-cssnano-plugin

 

而我采取了其中的第一种压缩方案,即postcss的方案,顺便也学习下postcss的配置,安装了postcss-loader和cssnano依赖之后,需要做如下配置:

// 第一:在需要用postcss处理的文件加入postcss-loader
test: /.css/, use:[‘style-loader‘,‘css-loader‘,‘postcss-loader‘]

 

// 第二:配置postcss,需要在项目根目录新建文件postcss.config.js
module.exports = { plugins: [ require(‘cssnano‘)({ preset: ‘default‘ }), ] };

 

5、有待更新...

三、总结

在学习webpack的过程中,我主要以webpack中文文档(https://webpack.docschina.org/concepts/)和github这两个网站为主,当然也少不了百度和google。学习下来发现,只要你认真看官方文档及去github上找官方给出来的示例,总能找到你的解决方案。

最后,贴出我的demo(https://github.com/xieqian-xq/demo/tree/master/webpack)。

还请各位大神多多指教











以上是关于webpack4之踩坑总结的主要内容,如果未能解决你的问题,请参考以下文章

web APP 开发之踩坑手记

微信抢票之踩坑

ef+Npoi导出百万行excel之踩坑记

Creat-React-Native-App 之StackNavigator之踩坑记录

#yyds干货盘点#Flowable-UI最新版6.7.0入门篇之踩坑记录

第1241期webpack4升级完全指南