一、起步
创建项目,在项目文件夹中cmd
1.初始化项目
npm init
2.本地安装webpack
npm install --save-dev webpack
npm install --save-dev webpack-cli
3.创一个用于打包的文件夹dist
此时文件夹应该是这样的
二、创建webpack.config.js
4.在文件根目录创建webpack.config.js
在此文件中写入如下代码
const path = require("path"); //导入path包 这是commonjs 获取js方式
module.exports = {
entry: './src/main.js', //入口
output: {
path: path.resolve(__dirname, 'dist'), //出口
filename: 'bundle.js' //打包名称
},
mode: 'development' //开发模式
};
此时在控制台输入 npx webpack就会打包一次代码,dist文件夹中会出现"bundle.js"文件
三、自动打包,热更新
如果想要webpack自动打包热更新需要安装webpack-dev-server
npm install webpack-dev-server -D
此时有两种方法自动打包
第一种.
在package.json 中的scripts中添加
start:"webpack-dev-server"
在终端中输入 npm run start
编译成功
但是编译之后没有放到磁盘 相当于放到了内存
在地址栏中输入
http://localhost:8080/bundle.js
在index.html中引入 内存中的
<script src="/bundle.js"></script>
启动指令中带有参数
在packjson 中可以加参数
start:"webpack-dev-server --open --port 3000"
修改打开目录
start:"webpack-dev-server --open --port 3000 --contentBase src"
现在发现当我每次保存 不管修改代码或者没有修改代码都会进行打包
start:"webpack-dev-server --open --port 3000 --contentBase src --hot"
第二种.
在webpack.config.js中处理
const path = require("path");
module.exports = {
entry: './src/main.js',
mode: 'development' ,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer:{
open:true,//自动打开浏览器
port:3000,//端口
contentBase:"src",//修改打开目录
hot:true//热更新
}
};