WebPack打包工具

一、起步

创建项目,在项目文件夹中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//热更新
    }
};