乐趣区

关于webpack:webpack实战入门

jiezi

  1. webpack

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

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


2. webpack 打包的益处
    1. 程序员在开发的时候须要更好的代码布局，比方有空格、有换行、有正文、错落有致
    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. 因为咱们的网页不能只有 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 -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 文件。```
    退出移动版