webpack-cli
提供了丰富的终端命令行指令,可以通过webpack --help
进行查看,运行npx webpack --help
我们可以通过命令行就行配置 例如npx webpack --entry
指定入口,但是这种命令行的的没有办法保存,也不直观,我们可以通过配置文件来配置这些参数webpack.config.js
这个文件的名字是固定的,webpack
会自动的读取,webpack.config.js
是在nodejs
中运行的,因此我们在定义模块的时候,需要使用CommonJS
模块中,因此我们呢使用module.exports
来定义
const path = require('path')
module.exports = {
entry: './src/index.js', // 入口
output: { //出口
filename: 'bundle.js', // 指定输出文件的文件名
path: path.resolve(__dirname, './dist') // 文件的输出路径 path 在设置的时候,一定要设置成绝对路径
},
mode: 'none'
}
配置之后 运行 npx webpack
就会 把包生成一个dict
文件夹,下面有一个bundle.js
文件
在html
中引入
<script src="./dist/bundle.js"></script>
就可以了