For the future (after v4, maybe 4.x or 5.0), we have already started the exploration of how a preset or addon system will help define this. What we don’t want: To try and shove a bunch of things into core as defaults What we do want: Allow other to extend
webpack4 最主要的卖点便是 0 配置,话不多说,让我们从头开始体验
webpack 4
的一些特性。entry 和 output
首先创建一个空目录,然后初始化一些配置:
接着,我们需要安装webpack的相关依赖:
webpack
: 即 webpack 核心库。它提供了很多 API, 通过 Node.js 脚本中 require('webpack') 的方式来使用 webpack。webpack-cli
:是webpack
的命令行工具。webpack 4 之前命令行工具是集成在 webpack 包中的,4.0 开始 webpack 包本身不再集成 cli。现在,在
package.json
中添加一下构建命令:让我们来运行一下:
然后我们就看到了这样的错误:
这是因为
webpack4
因为没有webpack.config
这样的配置文件指定entry
,会把./src/index.js
作为默认的入口文件。所以我们可以来简单创建一下:然后再次运行:
然后发现我们在目录下面生成出了一个这样的一个文件
./dist/main.js
,这也是因为webpack4
会默认指定./dist/main.js
作为其输出目录。production 和 development 模式
在
webpack 4
以前,拥有2份配置文件是webpack
项目常见的情况,一个常规的项目配置可能是这样的:但是在
webpack 4
中,我们可以通过设置命令行参数production
和development
来区分环境:让我们运行:
再来看看
./dist/main.js
发现mian.js
并没有被压缩了。再试试结果时一个已经被压缩的js。
webpack 4
另一个新的特性就是mode
。可以通过--mode
标识开使用。覆盖默认的 entry/output
在
webpack 4
中我们可以通过下面的方式来覆盖默认的 entry/output使用 Babel 转译 ES6
webpack 在没有 babel-loader 的情况下,是没办法进行 ES6 转译的。将 ES6 转成 ES5 语法,我们需要这些依赖:
让我们来安装他们:
下一步是通过
.babelrc
来声明编译使用的转换器:在这里我们有2种方式来配置
babel-loader
:--module-bind
参数我们知道
webpack 4
是0配置的,为什么我们还需要去写这些配置工具能?关于 webpack4 0 配置适用于:额,也就是这些,所以说如果你需要使用
loader
,那么你还是需要创建一个webpack 配置文件😊。关于有没有可能将 loader 也加入到0配置中去。Sean 有这样的一段回答:简单的来说,就是在后续系统中会开始探索这一点,但是不会无脑的把什么东西都加入到0配置中去,需要保持其高度的可扩展性。所以我们还是乖乖地先配置我们的
webpack.config,js
:这里就不必再定义 entry 和 output 了。 上面说的另一种方式就是通过
--module-bind
来定义 loader:不太推荐这种方式,这样会使
script
内容变得臃肿。