Webpack4之零配置体验

Webpack4 发布快一个月了，据悉这个版本做了很多的改动，其中一个就是零配置，当然只针对js文件。

下面来体验一下。

初始化项目#

打开命令行工具，输入下面代码，需要先安装好 node.js。

mkdir webpack-test  # 创建文件夹
cd webpack-test     # 进入文件夹
npm init -y         # 初始化

输入上面命令后，会生成一个package.json文件。

不指明版本号安装，会自动安装最新的 4.x.x 版本，Webpack4 需要额外安装webpack-cli库

npm install webpack webpack-cli --save-dev # 安装 webpack webpack-cli

Webpack4 支持零配置，新增 mode 参数，mode 有 2 个可选值：development和production，对应开发模式和生产模式。开发模式构建速度更快，生产模式打包后文件更小。

创建入口文件index.js

mkdir src      # 创建入口文件夹
cd src         # 进入入口文件夹
touch index.js # 创建入口文件

在index.js中编写下面代码

// index.js
function hello() {
  console.log("hello world");
}

执行命令打包文件

npx webpack --mode development

文件打包成功。Webpack4 会自动创建一个文件夹dist，里面是编译后的文件main.js。