Webpack--模块打包器

1、webpack是什么东西？干什么用的？     它一个模块打包器     作用：         1、可以当做一个服务器         2、将浏览器不识别的js语法转换为浏览器识别的js语法（将ES6转为可识别的ES5）         3、将我们的模块进行打包          ......   通过npm全局安装的工具 C:{管理员账号路径}\AppData\Roaming\npm 全局安装webpack : (1). npm install webpack@3 -g; (2). npm install webpack -dev - server@2 -g;   本地安装 npm install webpack@3 -D; npm install webpack - dev - server@2 -D; 2、webpack工作的原理：                  入口文件--> module(loader 处理 配置.....)---出口文件                   （1）、npm init -y 初始化文件                 （2）、局部安装webpack cnpm install webpack@3 --save-dev                  （3）、创建一个webpack.config.js文件 //引入node的核心模块 注：以下为js代码 const path = require ( "path" ); const htmlWebpackPlugin = require ( "html-webpack-plugin" ); //配置路径 const PATH = {      /*         path.join将第一个路径和第二个路径结合起来         生成一个新的路径         __dirname:当前文件的绝对路径      */      app:path . join ( __dirname , "src/index.js" ),      main:path . join ( __dirname , "dist/" ) } // 忽略文件： 创建一个.gitignore文件将node_modules文件忽略： .gitignore文件中写入 node_modules; //配置文件 module . exports = {      //入口文件的配置信息      entry: {          //入口文件的地址          app:PATH . app     },      //出口文件的配置信息      output: {          //打包完成以后的js文件的名称          filename: "[name].js" ,          //打包完成以后的js文件放置的位置          path:PATH . main     },      module: {          rules: [             {                  //匹配哪些文件用以下的loader                  test: / \. js $ / ,                  use: {                      loader: "babel-loader" ,                      //将ES6的代码转换为ES5的代码                      options: {                          presets: [ "env" ]                     }                 }             },             {                  test: / \. ( css | scss ) $ / ,                  //从右到左 从下到上                  use: [                      "style-loader" ,                      "css-loader" ,                      "sass-loader" ]             }         ]     },      plugins: [          //自动帮我们创建一个html文件 帮我们把相关的js进行引入          new htmlWebpackPlugin ({              //生成html文件的明细              filename: "newIndex.html" ,              template: "index.html" ,              title: "德玛西亚" ,              header: "<h1>诺克萨斯</h1>" ,              list: [ "张三" , "李四" , "陈亮" ]                      }),          new htmlWebpackPlugin ({              //生成html文件的明细              filename: "list.html" ,              template: "index.html" ,              title: "德玛西亚" ,              header: "<h1>诺克萨斯</h1>" ,              list: [ "张三" , "李四" , "陈亮" ]                      })     ] } /*以上这种打包方式在4.0中以废除了,4.0以下版本还可以正常使用*/ 将项目中的多个模块进行打包 ，把凡是js html css 等文件通过 loader 的方式进行模块打包