cnpm和npm功能一样，服务器在中国，因此下载速度更快，使用npm install -g cnpm --registry=https://registry.npm.taobao.org

VSCODE终端上  npm init -y 创建一个package.json 初始化项目

创建需要的src和dist目录（默认打包的是index.js）

执行

cnpm I webpack -D

cnpm I webpack-cli -D

创建一个webpacka.config.js设置webpack的配置mode:必填 为production或development使用module.exports(暴露)={

      Mode:”development”

}

默认打包入口.src =>index.js,打包输出文件是dist=>main,js（生成在内存中，并不是在目录内，引入即可）

执行webpack 即可执行打包

存在问题

      如果引入的打包后的文件，每次更改后不从新打包   则不会更新  

      存在弊端，每次更改后需要从新打包

解决办法 安装webpack-dev-server

      使用 cnpm I webpack-dev-server -D进行下载

在生成的package.json的script里面新建一个成员 “dev”: “webpack-dev-server”

运行的时候使用npm run dev即可 默认地址为http://localhost:8080/ 可以进行修改  后面讲解

在html中引入 只需要/main.js即可  每次修改都能实时在页面相应

端口号可以在dev中设置  例如：改为8888 只需要在“dev”: “webpack-dev-server –port 8888” 中间以空格隔开 还可以设置localhost 同样只需在后面添加—host xxx即可

存在问题进来后不是在首页，需要选择进入首页  

如何将首页和main,js一样放入内存中

      解决办法需要引入html-webpack-plugin来实现

通过 cnpm I html-webpack-plugin加载完成后在配置文件中进行配置

配置文件   引入path(用来拼接路径) 和 html-webpack-plugin

将html-webpack-plugin实例化，如：

const HtmlWebpackPlugin =  require(‘html-webpack-plugin’)

const htmlPlugin = new HtmlWebpackPlugin({

      template: path.join(__dirname, ‘./src/index.html’),  //源文件

      filename: ‘index.html’ //生成在内存中文件的名字

})

然后放入与mode后面一同暴露，如

module.exports={

    mode:"development",

    plugins:[

        htmlPlugin

    ]

}

 实现后可以在html中取消script的引用，默认会自动在后面追加一个script来引入main.js

终端运行npm run dev 即可