新建项目

• 新建文件目录
• 目录结构如下
• webpack-demo
  |- package.json
  |- package-lock.json
  + |- /dist
  + |- index.html
  |- /src
  |- index.js
• 初始化package.json

npm init -y

• 本地安装webpack 和 webpack-cli tips:默认安装是 5.x版本，只是在这个项目中安装webpack5不会影响电脑全局使用的webpack.
• npm install -D webpack webpack-cli
• Tip
• 在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev。更多信息请查看 npm 文档。

总结下命令 ：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

使用webpack 打包

• 不配置文件，npx webpack
• 使用一个配置文件

不配置文件 ，按照以上的新建项目流程的目录结构可以直接使用 npx webapck 打包

可以这样说，执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：

npx webpackTip

输出可能会稍有不同，但是只要构建成功，那么你就可以放心继续。

在浏览器中打开 dist 目录下的 index.html，如果一切正常，你应该能看到以下文本：'Hello webpack'。

使用一个配置文件,默认文件名 webpack.config.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

现在，让我们通过新的配置文件再次执行构建：

 npx webpack --config webpack.config.js

Tip

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。

npm scripts

考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：

{
  "name": "webpack5",
  "version": "1.0.0",
  "description": "",
  "private":true,
  "scripts": {
    "build": "webpack"
  },
  "author": "ff",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。

注意，使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本。

npm run build 代替 npx webpack

Tip

可以通过在 npm run build 命令与参数之间添加两个连接符的方式向 webpack 传递自定义参数，例如：npm run build -- --color。

总结

关键词

• 本地安装 webpack 和 webpack-cli
• npm install webpack webpack-cli –seve-dev
• 搭建默认最简单目录结构，零配置打包编译
• npx webpack
• webpack 配置文件名 webpack.confing.js