在开发人员还在体会webpack3.x的余韵时，webpack4.x已经悄然而来。

 

　　而对使用者来说，最期待的问题无外乎如下：

 

　　新版本与旧版本相比都有哪些改变？

 

　　webpack3.x到webapck4.x的迁移？

 

　　使用webpack4.x我们应该注意什么？

 

　　webpack的新特性

 

　　webpack作为构建工具的强大之处在于：

 

　　可以在webpack.config.js中配置很多独特的功能；

 

　　它的配置灵活多变；

 

　　但正因为这样，这也是它的糟点。因为太随意，所以不好控制，造成了如下的问题：

 

　　学习、使用、研究webpack的成本过高（进阶曲线太陡）；

 

　　构建一个小应用也需要像构建大应用那样配置webpack.config.js（麻雀虽小五脏俱全）；

 

　　而webpack4.x作为新一代版本webpack，它的出现极大的解决了现有的问题。

 

　　webpackk4.x可以不使用webpack.config.js配置文件

 

　　可以使用下面6小步完成项目的构建：

 

　　创建一个项目目录（webpack-demo），然后进入改目录

 

　　mkdirwebpack-demo&&cdwebpack-demo

 

　　初始化package.json文件

 

　　npminit-y

 

　　加载webpack和webpack-cli依赖

 

　　npminstallwebpackwebpack-cli--save-dev

 

　　在项目中添加~/src/index.js文件（index.js是默认的入口文件，默认入口目录为~/src，当然你也可以自定义入口文件，需要修改package.json中的main配置项为指定的文件）

 

　　index.js文件代码如下：

 

　　console.log('hellowebpack.')

 

　　打开package.json在scripts配置项中添加如下代码：

 

　　"scripts":{

 

　　"build":"webpack"

 

　　}

 

　　注：这就是NPM的scripts命令

 

　　运行npmrunbuild命令，之后在项目中你将看到一个~/dist/main.js的文件。在命令窗口你因该注意到如下的警告提示：

 

　　WARNINGinconfiguration

 

　　The'mode'optionhasnotbeenset,webpackwillfallbackto'production'forthisvalue.Set'mode'optionto'development'or'production'toenabledefaultsforeachenvironment.

 

　　Youcanalsosetitto'none'todisableanydefaultbehavior.Learnmore:https://webpack.js.org/concepts/mode/

 

　　忽略这条提示信息，我们发现webpack4.x的项目初始化配置和webpack3.x没什么大的区别，但是webpack4.x少了必须要的webpack.config.js配置文件。

 

　　打包模式的改变

 

　　我们再回头查看上面这个提示信息，它的意思就是说：‘如果没有设置打包模式这个配置项，那么默认的打包模式为生产模式（production），而对于开发模式（development），需要配置mode配置项’，说到这里，我想各位看官应该明白了webpack4.x增加了很多默认配置项，针对不了解webpack的人员或小应用开发的场景，这样做无异省时省力。

 

　　但实际应用中，我们往往还是区分开发模式和生产模式，但这在webpack4.x中也不是什么难事儿，只要修改package.json中的scripts如下：

 

　　"scripts":{

 

　　"dev":"webpack--modedevelopment",//用于开发模式

 

　　"build":"webpack--modeproduction"//用于生产模式

 

　　}

 

　　‘对！webpack4.x就是这么简单’。我们不需要像webpack3.x那样分别定义开发模式和生产模式这样两份配置文件。

 

　　重载默认的配置项入口/出口

 

　　没有了配置文件webpack.config.js，在减少了我们的配置工作量同时，也给初窥门径的我们带来了一些疑问。例如：如何自定义入口/出口？

 

　　在没有webpack.config.js的情况下，我们可以在命令行中添加入口/出口配置项，代码如下：

 

　　"scripts":{

 

　　"dev":"webpack--modedevelopment./src/entry.js--output./dist/bundle.js",//用于开发模式

 

　　"build":"webpack--modeproduction./src/entry.js--output./dist/bundle.min.js"//用于生产模式

 

　　}

 

　　这只是不使用webpack.config.js的一种方案。

 

　　以上就是webpack4.x给我们带来的整体变化。

 

　　但是原来webpack.config.js配置文件中的module和plugins配置项中的功能实现还是需要使用webpack.config.js。虽然webpack团队的计划是0配置一些常用的loader，plugin，但实现的仅有UglifyJSPlugin内置插件，在生产模式无需引入它就可以实现*.js代码的压缩。其它的loader和plugin则只能通过webpack.config.js来引入。

 

　　webpack的迁移和注意事项

 

　　看到webpack4.x的这些变化，很多人不仅会问webpack3.x到webpack4.x的迁移是不是很麻烦，其实并不麻烦，webpack4.x向后兼容webpack.3x。

 

　　前面为了不引入webpack.config.js，我们使用了npm的scripts，其时像入口/出口的重载，我们也可以在webpack.config.js配置文件中完成，配置跟原来的相似，但是webpack4.x有如下问题需要注意：

 

　　升级到webpack4.x，你会发现在使用extract-text-webpack-plugin分离*.css出文件时经常出错，这是extract-text-webpack-plugin本身的问题，官方推荐使用mini-css-extract-plugin来避免问题的出现，但使用mini-css-extract-plugin有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。

 

　　使用使用babel-loader转化ES6->ES5时将不需要.babelrc配置文件，你只需要在package.json的scripts中添加--module-bindjs=babel-loader即可完成对babel-loader的配置。

 

　　其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。

 

　　webpack4.x的demo

 

　　紧接上面的配置：

 

　　首先，添加html-wepback-plugin和html-loader依赖：

 

　　npminstallhtml-webpack-pluginhtml-loader--save-dev

 

　　html-webpack-plugin生成html文件（html文件用来加载打包生成bundle.js文件），当然你也可以使用webpack支持的各种模板loader，这里使用html-loader支持的*.html类型模板来生成。

 

　　其次，添加mini-css-extract-plugin和css-loader依赖：

 

　　npminstallmini-css-extract-plugincss-loader--save-dev

 

　　loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的webpack.config.js文件。

 

　　然后，添加babel-loader、@babel/babel-core和@babel/babel-preset依赖：

 

　　npminstall@babel/corebabel-loader@babel/preset-env--save-dev

 

　　loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的webpack.config.js文件。

 

　　修改package.json中scripts如下：

 

　　"scripts":{

 

　　"dev":"webpack--modedevelopment--module-bindjs=babel-loader./src/entry.js--output./dist/bundle.js",

 

　　"build":"webpack--modeproduction./src/entry.js--module-bindjs=babel-loader--output./dist/bundle.min.js"

 

　　},

 

　　最后，添加webpack-dev-server依赖，实现项目文件修改，浏览器及时刷新

 

　　npminstallwebpack-dev-server

 

　　在package.json中scripts的dev替换webpack为webpack-dev-server即可，代码如下：

 

　　"scripts":{

 

　　"dev":"webpack-dev-server--modedevelopment--module-bindjs=babel-loader./src/entry.js--output./dist/bundle.js",

 

　　"build":"webpack--modeproduction./src/entry.js--module-bindjs=babel-loader--output./dist/bundle.min.js"

 

　　},

 

　　这样一个简单的demo就完成了。

 

　　其他的loader和plugin配置和webpack3.x类同。






本文转载自中文网