【前端技术】Webpack基础

演化计算与人工智能

发布于 2022-01-24 13:55:07

7100

发布于 2022-01-24 13:55:07

作者：张全玉

一、Webpack是什么

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。其官网的首页图很形象的画出了 Webpack 是什么，如下：

一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

二、Webpack的优缺点

Webpack的优点是：

专注于处理模块化的项目，能做到开箱即用一步到位；
通过 Plugin 扩展，完整好用又不失灵活；
使用场景不仅限于 Web 开发；
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
良好的开发体验。

Webpack的缺点是只能用于采用模块化开发的项目。

三、选择Webpack的原因

经过多年的发展， Webpack 已经成为构建工具中的首选，这是有原因的：

大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，Webpack 可以为这些新项目提供一站式的解决方案；
Webpack 有良好的生态链和维护团队，能提供良好的开发体验和保证质量；
Webpack 被全世界的大量 Web 开发者使用和验证，能找到各个层面所需的教程和经验分享。

四、安装与使用

步骤一：安装依赖

// 初始化package.json
npm init -y

// 安装webpack 和 webpack-cli
npm install webpack@4.41.2 webpack-cli@3.3.10 -D

步骤二：新建文件

在根目录下新建src文件，在src文件中新建Header.js和index.js Header.js:


function Header(){
    const dom = document.getElementById('app')
    const header =  document.createElement('div')
    header.innerHTML = 'Header'
    dom.appendChild(header)
}

export default Header;

index.js:

import Header from './Header.js'
new Header()

步骤三：新建webpack.config.js文件

const path = require('path');

module.exports = {
  mode:'development',
  // JavaScript 执行入口文件
  entry:path.join(__dirname,'./src/index.js'), // 入口
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

步骤四：在控制台执行npx weback

npx weback

目录结构：

本示例提供完整代码：链接: https://pan.baidu.com/s/1Eexn4jVMnHUYwl4JI9GRwg 提取码: ea6m

五、打包图片

5.1 使用file-loader

步骤一：优化命令

在package.json文件设置build命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
},

打包直接使用npm run build

步骤二：安装file-loader

npm install file-loader --save-dev

步骤三：配置webpack.config.js文件

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'), // 入口
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
      rules:[
          {
            test:/\.(png|jpe?g|gif)$/i,
            use:[
                {
                  loader: 'file-loader',
                  options:{ // options对file-loader进行配置
                  name:'[name].[ext]', // 产出文件名字
                  outputPath:'imgs/' // 产出文件存放地：将打包后的图片放到dist/imgs文件中
                  }
                }
              ]
          }
      ]
  }
};

重点：file-loader让打包生成后的图片文件与源码代码的图片文件名称一致

5.2 使用url-loader

重点：

url-loader 工作方式很像 file-loader，但是，它返回的是DataURL，即base64的图片编码。
只会生成bundle.js文件

步骤一：安装url-loader

npm install url-loader --save-dev

步骤二：修改配置webpack.config.js文件

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'), // 入口
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
      rules:[
          {
            test:/\.(png|jpe?g|gif)$/i,
            use:[
              {
                loader:'url-loader',
                options:{
                name:'[name].[ext]',
                outputPath:'imgs/',
                limit:20480 // 如果图片文件大于20KB,就会单独生成 XXX.jpg 文件；如果小于20KB，直接解析成base64字符串 -》 设置img src属性上
               }
              }
             ]
          }
      ]
  }
};

5.3使用区别

图片很大 -》 base64字符串很大 -》bundle.js体积很大 -》 index.html加载 bundle.js时间就会很长
图片很大 -》 file-loader -> 单独生成 XXX.jpg文件 -》 index.html 引入XXX.jpg文件 -》 bundle.js 体积就会很小 -》 页面加载快

图片很小 -》 file-loader -> 单独生成 XXX.jpg 文件 -》 多发送一次HTTP请求
图片很小 -》 url-loader -> 解析成base64字符串 -》 设置img src属性上 -》不需要发送额外的请求图片的HTTP请求

本示例提供完整代码：链接: https://pan.baidu.com/s/1O-AE5ess925Kqis4uD9kQg 提取码: ktd2

六、打包样式文件

6.1 打包css文件

步骤一：安装css-loader style-loader

npm install --save-dev css-loader style-loader

步骤二：配置webpack.config.js文件

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'), // 入口
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
      rules:[
          {
            test:/\.(png|jpe?g|gif)$/i,
            use:[
              {
                loader:'url-loader',
                options:{
                name:'[name].[ext]',
                outputPath:'imgs/',
                limit:20480
                }
              }
            ]
          },
          {
            test:/\.css$/i,
            use:[// loader 的执行顺序：从后往前，从下往上，先执行css-loader，后执行style-loader
              "style-loader",
              "css-loader"
              ]
          }
      ]
  }
};

6.2 打包scss

步骤一：安装sass-loader node-sass

npm install sass-loader@12.1.0 node-sass@5.0.0  --save-dev  //安装对应的版本

// css3属性，对低版本做兼容
npm i- D postcss-loader

// 需要配合postcss.config.js文件使用
npm install autoprefixer -D


autoprefixer 可以加上厂商前缀
例如： -ms-input-placeholder{
  color:grey;
}

步骤二：新建postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

步骤三：修改package.json

"keywords": [],
 "browersList": [
    "> 1%", // 市场份额大于1%
    "last 2 versions" // 并且兼容上两个版本
  ],

步骤四：配置webpack.config.js文件

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'), // 入口
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
      rules:[
          {
            test:/\.(png|jpe?g|gif)$/i,
            use:[
              {
                loader:'url-loader',
                options:{
                  name:'[name].[ext]',
                  outputPath:'imgs/',
                  limit:20480
                  }
                }
              ]
          },
        {
          test:/\.scss$/i,
          use:[
            "style-loader",
            // 对css-loader进行配置
            {
              loader:'css-loader',
              options: {
                importLoaders:2 //scss文件嵌套引用时，也会去使用postcss-loader和sass-loader
               }
             },
              "postcss-loader",
              "sass-loader"
            ]
        }
      ]
  }
};