【前端技术】Webpack基础

2022-01-24 13:55:07 浏览数 (1)

作者：张全玉

一、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 开发者使用和验证，能找到各个层面所需的教程和经验分享。

四、安装与使用

步骤一：安装依赖

代码语言：javascript复制
// 初始化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:

代码语言：javascript复制

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

export default Header;

index.js:

代码语言：javascript复制
import Header from './Header.js'
new Header()

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

代码语言：javascript复制
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

代码语言：javascript复制
npx weback

目录结构：

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

五、打包图片

5.1 使用file-loader

步骤一：优化命令

在package.json文件设置build命令

代码语言：javascript复制
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"webpack"
},

打包直接使用npm run build

步骤二：安装file-loader

代码语言：javascript复制
npm install file-loader --save-dev

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

代码语言：javascript复制
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

重点：

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

步骤一：安装url-loader

代码语言：javascript复制
npm install url-loader --save-dev

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

代码语言：javascript复制
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使用区别

代码语言：javascript复制
图片很大 -》 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

代码语言：javascript复制
npm install --save-dev css-loader style-loader

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

代码语言：javascript复制
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

代码语言：javascript复制
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文件

代码语言：javascript复制
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

步骤三：修改package.json

代码语言：javascript复制
"keywords": [],
 "browersList": [
    "> 1%", // 市场份额大于1%
    "last 2 versions" // 并且兼容上两个版本
  ],

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

代码语言：javascript复制
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"
            ]
        }
      ]
  }
};

本示例提供完整代码：链接: https://pan.baidu.com/s/1hAm5zY-YUcL6GnWt3eF4Qg 提取码: ywgq

网站 webpack 打包 https 网络安全

0 人点赞