简易的打包js
我在网上找了些资料,自己动手试了试打包js,记录下过程
安装依赖
安装插件
npm install --save-dev webpack
npm install --save-dev webpack-cli
编写webpack
我们先建一个webpack.config.js的文件,然后进行配置
const path = require('path'); // 获取当前绝对路径
module.exports = {
entry: "./index.js", // 主文件入口
output: {
filename: "bundle.js", // 打包后的文件
path: path.resolve(__dirname, "./dist"),
}
}
这是一个很简单的配置,配置了entry需要打包的文件,再配置filename打包后文件的名字和path打包文件放置的位置
path.resolve是拼接路径用的,__dirname是获取绝对路径,再加上"./dist"我们的目标文件夹,这样可以得到我们目标文件夹的绝对路径
编写启动程序(package.json)
npm 允许在package.json文件里面,使用scripts字段定义脚本命令。详情可以看[npm scripts 使用指南](http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html)
我们现在设置打包的脚本
"scripts": {
"build": "webpack --mode production",
"dev": "webpack --mode development --watch"
}
脚本里,我用了一些参数
- mode
mode有三个选项,
1. none
2. production(生产环境)
3. development(开发环境)
- watch
监听js自动打包
启动脚本,打包js
npm run dev (生产环境)能监听js自动打包
npm run build (生产环境)生产环境打包
js已经打包到dist文件夹里了