div是html4的东西吗,webpack4新增了哪些东西？

在开发人员还在体会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类同。

本文转载自中文网