npm init -y 总结下命令 : 可以这样说,执行 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 存在,则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。 考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便,我们可以设置一个快捷方式。调整 package.json 文件,添加一个 npm script: 现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令。 注意,使用 npm scripts,我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。这是大多数基于 npm 的项目遵循的标准,因为它允许所有贡献者使用同一组通用脚本。 npm run build 代替 npx webpack 可以通过在 npm run build 命令与参数之间添加两个连接符的方式向 webpack 传递自定义参数,例如:npm run build -- --color。 关键词新建项目
|- package.json
|- package-lock.json
+ |- /dist
+ |- index.html
|- /src
|- index.jsmkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
使用webpack 打包
不配置文件 ,按照以上的新建项目流程的目录结构可以直接使用 npx webapck 打包
使用一个配置文件,默认文件名 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
npm scripts
{
"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"
}
}
Tip
总结