webpack踩坑记录

说明

这是本人在学习webpack的过程中遇到的一些与教程有出入的地方以及自己遇到的一些问题和解决方法。
贴一个教程的链接，对刚入手的很友好
链接: 教程

1. .babelrc版本导致的presets问题

解决方案：
1.降级版本：
命令：npm install -D [e-mail] babel-core babel-preset-env babel-preset-react webpack
配置项:

"presets":[ "env","react"]

2.升级版本：
命令：npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack
配置项:

 "presets":["@babel/env","@babel/react"]

2. css-loader的Module问题

也是由于webpack版本的语法改变
原本为：
modules:true+配置项等
现在为：

modules: {
	localIdentName: '[path][name]__[local]--[hash:base64:5]',
},

要把配置项写到modules里面

3. postcss autoprefixer插件使用问题

通过阅读官网的说明，了解到autoprefixer插件需要添加browserslist，即浏览器列表才可以正常使用
官网链接：官网链接
官网说明：

从阅读可以看出有两种方式添加browserslist
1.通过创建.browserslist文件(不推荐)
2.通过package.json添加（推荐）
我个人的配置:

"browserslist": [
    "last 1 version",
    "> 1%",
    "not ie <= 8"
  ]

‘last 1 version’：指浏览器的最近1个版本，数字可以改变
‘>1%’：基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用
‘not ie <= 8’：字面意思浏览器范围的取反

4.Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

webpack新版本原本的webpack.optimize.UglifyJsPlugin 不支持了
解决方法：
安装插件：npm install --save-dev uglifyjs-webpack-plugin
配置：
原本为：

plugins:[
        new webpack.BannerPlugin('版权所有'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ]

现在：

引入：const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions:{
                    compress:false,
                }
            })
        ]
    }

5.Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

依旧是webpack版本导致的插件不兼容
现在npm install 的webpack是4.x版本
但是npm install 的 extract-text-webpack-plugin默认是3.x版本，不支持webpack4.x，所以需要升级插件

npm安装：npm install --save-dev [e-mail]
这时插件的版本会变成

之后再继续npm run build就正常了