1. webpack

    1. webpack 就是一个js程序的打包器，当 webpack 解决应用程序时，它会递归地构建一个依赖关系图

3.webpack提供了模块化反对，代码压缩混同，解决js兼容问题，性能优化等个性，进步了开发效率和我的项目的可维护性

2. webpack打包的益处
    1. 程序员在开发的时候须要更好的代码布局，比方有空格、有换行、有正文、错落有致
    2. 浏览器望能更快的解析代码，而不是更好的看懂代码。所以Webpack的次要作用就是压缩、优化咱们写的代码，把多余的货色去掉，而后依照浏览器喜爱的格调来编排代码！

    1. webpack的应用

      1. 新建我的项目空白目录 运行 npm init -y命令 初始化包治理配置文件 package.json2. 新建src源代码目录，将我的项目的源代码放在这个目录下3. 装置webpack   npm i webpack webpack-cli -D        - 在package.json文件的devDependencies中呈现了装置的webpack和webpack-cli，就代表装置胜利3. 在我的项目的根目录自行创立 webpack.config.js 文件 （所有的配置都写这里）

    2. 配置前打包操作演示

      1. 批改我的项目中的package.json文件增加运行脚本dev如下     "scripts":{        "dev":"webpack"   }2. 在演示运行的时候须要初始初始配置打包模式    module.exports = {        mode: 'development' // 能够设置为development(开发模式)，production(公布模式)  }    - 如果设置为development则示意我的项目处于开发阶段，不会进行压缩和混同，打包速度会快一些    - 如果设置为production则示意我的项目处于上线公布阶段，会进行压缩和混同，打包速度会慢一些    - scripts节点下的脚本，能够通过npm run运行 如 npm run dev  将会启动webpack进行我的项目打包3. 期待webpack打包结束之后，找到默认的dist门路中生成的main.js文件，将其引入到html页面中。浏览页面查看成果。

    3. 开始配置

      1. 在webpack 4.x 中，默认会将src/index.js 作为默认的打包入口js文件2. 默认会将dist/main.js 作为默认的打包输入js文件

    // 在webpack.config.js内，咱们须要将所有配置当成一个对象导出

    1. 引入node.js 中专门操作门路的模块

    const path = require('path')
    module.exports = {

         // 1. 我的项目编译模式     mode: 'development' ,     // 2. 配置打包的入口和进口文件     entry: path.join(__dirname, './src/xx.js'), // 指定某入口文件的门路,     output: {         // 设置门路         path: path.join(__dirname,'./dist'),     // 设置文件名     filename: 'bundle.js'       }

    }

    6.  webpack 配置主动打包
    1. 在默认的状况下，咱们更改入口js文件的代码，须要从新运行命令打包webpack，那么每次都要从新执行命令，这是一个十分繁琐的事件，主动打包能够解决这样繁琐的操作

    2. 装置主动打包性能的包:webpack-dev-server

          -  npm install webpack-dev-server -D

    3. 批改package.json中的dev指令如下

       "scripts":{  "dev":"webpack-dev-server"}
    4. 将引入的js文件门路更改为 <script src="/bundle.js"></script>
    5. 运行npm run dev，进行打包
    6. 关上网址查看成果：http://localhost:8080
    7. webpack-dev-server主动打包的输入文件(bundle.js)，默认放到了服务器的根目录中.是虚构的看不见的
    8. webpack-dev-server 会启动一个实时打包的http服务器，实现形式就是关上package.json文件
    9. 批改dev命令： "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
    10. webpack-dev-server也须要配置局部参数能够独自拿进去配置

    module.exports = {

     // 开发服务器的配置 devServer: {   port: 8080, // 扭转开启的端口号   progress: true, // 开启内存打包中的进度条，这样咱们能分明地看到打包的过程   open: true, // 主动关上浏览器   compress: true //压缩 },

    }

    7. 配置html-webpack-plugin 生成一个预览页面
    1. 因为咱们的网页不能只有JS代码，网页最基本的还是须要一个HTML文件。然而Webpack只会打包JS，因而咱们就要引入一个HTML模板。模板HTML，其实就是一个最原始HTML文件，咱们通常将其命名为index.html。它的作用次要是：为html文件中引入打包后的内部资源，如script、link标签里的JS、CSS文件。
    2. 因为当咱们拜访默认的 http://localhost:8080 的时候，看到的是一些文件和文件夹，想要查看咱们的页面还须要点击文件夹点击文件能力查看，那么咱们心愿默认就能看到一个页面，而不是看到文件夹或者目录。

    3. 装置默认预览性能的包:html-webpack-plugin

      • npm install html-webpack-plugin -D

    4. 批改webpack.config.js文件，如下：
      //导入包
      const HtmlWebpackPlugin = require("html-webpack-plugin");
      //创建对象
      const htmlPlugin = new HtmlWebpackPlugin({

       // 设置生成预览页面的模板文件 template:"./src/index.html", // 模版门路，个别放在public文件夹下 // 设置生成的预览页面名称 filename:"index.html", // 打包后的文件名   // minify 对打包的html模版进行压缩   minify: {   removeAttributeQuotes: true, // 删除属性的双引号，除了一些非凡的删除不了以外都能删除   collapseWhitespace: true,    // 折叠空行将所有代码变成一行   removeComments: true         // 移除正文 },    hash: true // 给打包后在模板中引入的文件名生成hash戳，避免缓存

      })

    5. 持续批改webpack.config.js文件，增加plugins信息：
      module.exports = {

        ......  plugins:[ htmlPlugin ]

      }

    6. 打包后，dist文件夹内的index.html主动引入了Webpack打包后的文件

    1. 配置主动打包相干的参数

      1. package.json 中的配置   1. --open 打包实现后主动关上浏览器     2. --host 配置Ip地址   3. --port 配置端口2. "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

    2. webpack打包动态资源

      1. Webpack在设计时，只是用来打包JavaScript文件的代码。然而咱们晓得，一个网页不可能只存在JS代码和一个HTML模板，还有图片资源、CSS资源、文件资源等其余资源。并且，网页中的CSS款式也不可能变化无穷，可能你点击某个按钮时页面的排版就变了。其实实质上就是CSS变了，咱们将这种状况叫做动静CSS。2. 咱们晓得，对于曾经写死不须要批改的CSS，个别在HTML中通过link标签引入就能够了。然而对于动静CSS，必须要在特定的时候能力起作用，所以咱们不能间接通过link标签引入。3. 因而，咱们须要应用JS来管制动静CSS，而webpack自身不提供CSS的打包解决办法。为此，咱们须要一些插件来补充Webpack的性能

    --> 下载对应的loader；
    --> 配置相应的规定，让Webpack辨认，而后调用loader

    1. loader就是解析器的意思，解决不同的资源要应用及下载不同的loader。再配置相应的规定，让webpack明确咱们要应用什么样loader，解决什么样的文件。

    1. 打包css/scss/less资源

      1. CSS资源在一个网页外面是不可却少，解决一般的css文件只须要css-loader与style-loader就能够实现。2. 装置对应的loader -->   npm i css-loader style-loader -D3. css-lodaer与style-loader须要在Webpack.config.js下的module的rules内进行配置    module.exports = {    plugins:[htmlPlugin],    module: {      rules: [        //解决css的规定        {          // test 设置须要匹配的文件类型，反对正则          test:/\.css$/,          user:['style-loader','css-loader', 'postcss-loader']        },        // 解决less的规定            {           test:/\.less$/,           use:['style-loader','css-loader','less-loader']        },        {           test:/\.scss$/,           use:['style-loader','css-loader','sass-loader']        }      ]    }  }4. 装置less,less-loader解决less文件  npm install less-loader less -D5. 配置规定和css写在一起6. 装置sass-loader,node-sass解决less文件  npm install sass-loader node-sass -D7. 配置规定和css写在一起8. postCss是对 CSS 进行解决的一种工具        - 把 CSS 解析成 JavaScript 能够操作的 形象语法树结构    - 调用插件来解决 形象语法树结构 并失去后果9. 装置post-css主动增加css的兼容性前缀（-ie-,-webkit-）
    10.在我的项目根目录创立并配置postcss.config.js文件const autoprefixer = require("autoprefixer");module.exports = {    plugins:[ autoprefixer ]}11. 在css文件中增加 postcss-loader```

    1. 打包样式表中的图片以及字体文件

      1. 在样式表css中有时候会设置背景图片和设置字体文件，一样须要loader进行解决2. 应用url-loader和file-loader来解决打包图片文件以及字体文件3. 装置对应的loader  -->  npm install url-loader file-loader -D
    {     test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,     //limit用来设置字节数，只有小于limit值的图片，才会转换     //为base64图片     use:"url-loader?limit=16940" }```

    1. 打包js文件中的高级语法：在编写js的时候，有时候咱们会应用高版本的js语法

      1. 有可能这些高版本的语法不被兼容，咱们须要将之打包为兼容性的js代码,咱们须要装置babel系列的包2. 装置babel转换器        -  npm install babel-loader @babel/core @babel/runtime -D3. 装置babel语法插件包        -  npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D4. 在我的项目根目录创立并配置babel.config.js文件 module.exports = {        presets:["@babel/preset-env"],        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-                properties" ] }
    {     test:/\.js$/,     use:"babel-loader",     //exclude为排除项，意思是不要解决node_modules中的js文件     exclude:/node_modules/ }```

    1. SourceMap

    module.exports = {    mode: 'development',    devtool:'source-map'    }2. SourceMap是一种提供源代码到构建后代码映射技术；3. 如果开启了SourceMap，则代码出错时，通过映射能够追踪代码谬误的地位；4. 内部映射：打包后每一个js文件都会生成一个名字雷同的js.map文件；5. 内联映射：映射代码和打包代码写在一起，不独自生成js.map文件。```