关于webpack:webpack实战入门

1. webpack

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

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

2. webpack 打包的益处

1. webpack 的应用

   1. 新建我的项目空白目录 运行 npm init - y 命令 初始化包治理配置文件 package.json
   2. 新建 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. 配置主动打包相干的参数

   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. 打包 css/scss/less 资源

   1. CSS 资源在一个网页外面是不可却少，解决一般的 css 文件只须要 css-loader 与 style-loader 就能够实现。2. 装置对应的 loader -->   npm i css-loader style-loader -D
   3. 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 -D
   5. 配置规定和 css 写在一起
   6. 装置 sass-loader,node-sass 解决 less 文件  npm install sass-loader node-sass -D
   7. 配置规定和 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 -D
   3. 装置 babel 语法插件包
           -  npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
   4. 在我的项目根目录创立并配置 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 文件。```