webpack安装及配置

1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件，最终生成浏览器可以识别的资源html.css图片，js

2.安装

win+r输入cmd 唤出系统控制面板 然后进入本地目录

首先在本地目录创建一个文件夹，例如mypack,然后cd /mupack，然后输入以下命令

cd /mypack

npm init -y

npm i webpack webpack-cli -D

3.配置

打开vscode将创建好的mypack文件夹添加进去，然后创建一个webpack.config.js文件在里面输入以下代码进行配置

const path = require('path')
module.exports ={
    //入口
    entry:'./src/main.js',
    //输出
    output:{
        //目录：当前目录，下的dist目录
        path:path.resolve(__dirname,'dist'),
        //打包好的文件名
        filename:'bundle.js'
    },
//模式
    mode:"production", //development 开发模式 production 产品模式
    //插件
    plugins:[
        new HtmlWebpackPlugin({

        })
    ]
}

4.运行

在开发模式下运行，命令行输入npx webpack在产品模式下可以用npm run bulid 如果在package.json下配置了

"scripts":{
"serve":"webpack"
}

则可以使用npm run serve运行

5.插件

1、HotModuleReplacementPlugin

的热更新是依赖于 webpack -dev-server，另外是在打包文件更改时更新打包文件或者重新加载刷新整个页面，HRM是只更新修改的部分。

HotModuleReplacementPlugin是webpack模块自带的，所以♡webpack后，在插件配置项中直接使用即可。

const webpack = require('webp