webpack进行基本的打包配置
一、建目录 dist src/main.js
-
新建一个文件夹名为 【webapck】 , 在 webpack 中新建 【dist】 文件夹 和 【src】 文件夹,如下图所示:
image.png
-
二、初始化
- 在终端输入【npm init -y】
npm init -y
-
发现执行了【npm init -y】,多一个【package.json】文件
image.png
-
三、安装信赖包(-D)将信赖记录成开发信赖,只是开发中需要用的信赖,实际上线不需要的。
npm add webpack -D
npm add webpack-cli -D
发现多了一个node_modules文件。
image.png
四、 在【package.json】文件中添加一行 【script脚本】,让webpack打包的时候能找到命令
// webpack.config.js文件名最好不要更改,就默认用webpackp定义好的这样文件名
"script": {
"build": "webpack --config webpack.config.js"
},
image.png
五、新建webpack.config.js文件
-
新建一个webpack.config.js文件,如下所示
image.png
-
- 配置webpack.config.js文件
// 引入path模块
const path = require('path');
// 配置webpack的配置文件,需要将配置的对象导出,给webpack使用
module.exports = {
// 1. 打包入口,从哪个文件开始打包
entry: './src/main.js',
// 2. 打包的文件放在哪
output:{
// 打包的文件输出的目录(输出的目录必须是一个绝对路径),这里也可以写成path:path.join(_dirname, 'dist')
path: path.join(__dirname, './dist'),
// 打包后的文件名叫什么
filename: 'bundle.js'
},
// 3. 打包的模式: production 生产模式(打包后的文件或压缩) development(开发模式,不压缩)
mode: 'development'
}
六、在main.js中写入内容
console.log('这是一个main.js')
console.log('我是gg')
七、执行配置的package.js中的script脚本
npm run build
八、打包后打开【bundle.js】,发现main.js 中的内容已经被打包出来了。
image.png九、我们再新建一个index.js,和main.js同级,里面输入内容,再进行打包
-
index.js内容如下
image.png
-
- main.js中引入index.js. 因为 main.js是打包文件入口,所以需要把打包的文件都引用到main.js中
var index = require('./index');
console.log('这是一个main.js')
console.log('我是gg')
image.png
- 执行打包script脚本
npm run build
-
打开bundle.js,发现index.js和main.js两个文件都被打包在一个文件里了。
image.png
-
网友评论