配置webpack

1. 使用npm安装webpack

   npm install webpack webpack-cli -D

2. 在项目目录下面创建webpack.config.js文件并写入内容

   // 使用Node.js中的导出语法，向外导出一个webpack的配置对象
   module.exports = {
       // 代表webpack运行的模式，可选值有两个development和production
       mode: 'development'
   }
   

3. 在package.json中scripts写入

     "scripts": {  
       "dev": "webpack"
     },
   

4. 运行npm run dev

5. 更改打包文件输入输出的地址，在webpack.config.js文件并写入内容

   // 使用Node.js中的导出语法，向外导出一个webpack的配置对象
   module.exports = {
       // 代表webpack运行的模式，可选值有两个development和production
       // mode: 'development'
       // production可以用来压缩main.js的文件大小
       mode: 'development',
       // 修改打包文件的路径，和打包文件的路径
       entry: path.join(__dirname,'./src/index.js'),
       output: {
           path: path.join(__dirname,'./dist'),//输出文件的存放路径
           filename: 'bundle.js' //输出文件的名称
       }
   }
   

6. 安装自动跟新webpack插件，并修改package.json中的scripts

   npm install webpack-dev-server -D

   npm install webpack-cli -D

   "scripts": {
     "dev": "webpack serve"
   },
   

7. 由于自动跟新插件所生成的js文件是在虚拟内存中的，并且在根目录中，所以要修改html导入的js文件地址

8. 为了方便在http协议打开项目直接跳出index.html,使用html-webpack-plugin插件

   npm install html-webpack-plugin -D

9. 修改webpack.config.js配置文件

   // 导入node中的方法
   const path = require('path')
   // 导入插件
   const HtmlPlugin = require('html-webpack-plugin')
   
   // 创建HTML插件的实例对象
   const htmlPlugin = new HtmlPlugin({
       template: './src/index.html',
       filename: './index.html'
   })
   
   // 使用Node.js中的导出语法，向外导出一个webpack的配置对象
   module.exports = {
       // 代表webpack运行的模式，可选值有两个development和production
       // mode: 'development'
       // production可以用来压缩main.js的文件大小
       mode: 'development',
     	// 加载插件
       plugins: [htmlPlugin],
       // 修改打包文件的路径，和打包文件的路径
       entry: path.join(__dirname,'./src/index.js'),
       output: {
           path: path.join(__dirname,'./dist'),//输出文件的存放路径
           filename: 'bundle.js' //输出文件的名称
       }
   }