新建项目
-
新建文件目录
-
目录结构如下
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 webpack
Tip
输出可能会稍有不同,但是只要构建成功,那么你就可以放心继续。
在浏览器中打开
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