Webpack4 学习指南（一）

半途而废的花
1,007 阅读3分钟

Webpack 介绍：

Webpack 是代码编译工具，可以通过配置文件，解析项目结构，找到 HTML、JS、CSS、图片等资源模块之间的依赖关系，然后把所有的模块打包压缩。

功能特性：

  • 模块合并：在项目中会有多个模块和文件资源，最终把这些模块分类并合并成一个文件
  • 代码转换：把 SCSS、LESS 等编译成 css，把 Typescript 编译成 Javascript
  • 文件压缩：压缩合并 HTML、CSS、JS、图片等资源文件
  • 自动刷新：监听本地代码的变化，自动构建并刷新浏览器
  • 代码校验： 实现校验代码规范和单元测试

打包流程

工作原理：

在 Webpack 启动后，首先会读取配置文件，然后从 Entry 里面配置的入口文件开始解析 Entry 依赖的所有的 Module。每次找到一个 Module，就会根据配置的 Loader 去找出对应的转换规则，然后再去解析当前 Module 依赖的其他 Module。这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

配置说明

  • Entry：入口起点，配置构建内部依赖图的开始。
  • Output：输出结果，配置经过 webpack 一系列处理之后输出的结果。
  • Module：模块，即离散的功能块，一个模块对应着一个文件。webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk：代码块，一个 Chunk 由多个模块组成，用于代码的合并与分割。
  • Loader：模块转换器，用于对模块的源代码进行转换。
  • Plugin：拓展插件，在 Webpack 构建流程中的特定时机注入拓展逻辑来改变构建结果。

总结： Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的 Module。每找到一个 Module，就会根据配置的 Loader 去找出对应的转换规则，对 Module 进行转换后，再解析当前 Module 依赖的 Module。这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组，也就是一个 Chunk。最后 Webpack 会把所有的 Chunk 转换成文件输出。在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

单入口的配置 Demo

  • 项目目录：
Demo1
│  package.json
│  webpack.config.js  //webpack 配置文件
├─dist  // 打包后的文件目录
│      index.html     // 打包生成的 html 文件
│      main.592e7053425d85fe5239.js // 打包生成的 js文件
└─src   // 打包前的项目目录
        index.css
        index.html
        index.js

  • 代码

    一、 webpack.configure.js 文件

    const path = require("path");
const  HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry:"./src/index.js",
  output:{
    path: path.join(__dirname,"dist"),
    filename:"[name].[hash].js"
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        loader:["style-loader","css-loader"]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./src/index.html",
      filename:"index.html"
    })
  ],
  devServer:{
    contentBase:"./dist",
    host:"localhost",
    port:"8080"
  }
}

    二、package.json 文件

    "scripts": {
"build": "webpack --mode development",
"dev": "webpack-dev-server --mode development --open"
},

    二、index.html 文件

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test" class="test">test</div>
        <script src="./index.js"></script>
    </body>
</html>

  • 项目流程介绍

    • 安装 webpack、webpack-cli ，配置 package.json、webpack.configure.js 文件
    • 创建 src 文件，并在src 下添加 index.html、index.js、index.css 文件
    • 安装 css-loader、style-loader 加载 css 文件
    • 安装插件 Html-Webpack-plugin 插件自动生成 Html 文件
    • npm run build 打包

webpack 配置说明

一、配置开发服务器

  • 安装

    npm install webpack-dev-server -D

  • 代码

    webpack.configure.js 文件

     devServer:{
    contentBase:"./dist",
    host:"localhost",
    port:"8080"
  }

    package.json 文件

     "scripts": {
    "dev": "webpack-dev-server --mode development --open"
  }

  • 配置项

    • contentBase：配置开发服务器运行时的文件根目录
    • host：开发服务器监听的主机地址
    • port：开发服务器监听的端口号
    • cmppress：开发服务器是否启动压缩工具

二、加载 css 文件

  • 安装

    npm install css-loader style-loader -D

  • 代码

    module: {
    rules: [
        {
            test: /\.css/,
            include: path.resolve(__dirname,'src'),
            exclude: /node_modules/,
            use: [{
                loader: 'style-loader',
                options: {
                    insertAt:'top'
                }
            },'css-loader']
        }
    ]
}

  • 配置项

    • test：匹配测试的文件的正则表达式
    • use：配置 Loader 的名称和顺序
    • include：设置必须处理的文件夹
    • exclude：设置需要屏蔽的文件夹

三、插件（生成 HTML 文件）

  • 安装

    npm install html-webpack-plugin -D

  • 代码

    plugins: [
   new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true // 去掉属性的双引号
        },
        hash: true,
        template: './src/index.html',
        filename:'index.html'
    })
]

  • 配置项

    • template：模板路径
    • filename：生成的文件名
    • hash：在引入产出的资源的时候添加 hash，避免被缓存 -minify：对生成的 html 压缩

四、加载图片资源

  • 一、加载 JS 、css 文件的图片资源

    • 安装
    npm install url-loader -D
    • 代码
    {
    test:/\.(png|jpg|jpeg|gif|svg)/,
    use:[
      {
        loader:"url-loader",
        options:{
          outputPath:"images"
        }
      }
    ]
  }
    • 配置说明 url-loader、file-loader 均可解析图片地址，并把图片拷贝到目标位置，但是 url-loader 可以设置 limit 参数，在文件较小时可以把图片转成 base64 内嵌到页面中

  • 二、加载 HTML 文件的图片资源

    • 安装
    npm install webpack-withimg-loader -D
    • 代码
     {
     test:/\.(html|htm)$/,
     use:[
       {
         loader:"html-withimg-loader"
       }
     ]
 }
    • 配置说明
      • html-withimg-loader 用来解析 HTML 文件里的 img 标签

五、编译 Sass 、Less

  • 安装
npm install less less-loader -D
npm inatall node-sass sass-loader -D
  • 代码
 {
      test: /\.less/,
      include: path.resolve(__dirname,'src'),
      exclude: /node_modules/,
      use: [
          'css-loader','less-loader'
      ]
  },
  {
      test: /\.scss/,
      include: path.resolve(__dirname,'src'),
      exclude: /node_modules/,
      use: [
          'css-loader','sass-loader'
      ]
  },

六、处理 css3 前缀

  • 安装
npm install postcss-loader autoprefixer -D
  • 代码
{
   test:/\.css$/,
   use:['css-loader','postcss-loader'],
   include:path.join(__dirname,'./src'),
   exclude:/node_modules/
}
  • 创建 postcss.config.js
module.exports = {
    plugins:[require("autoprefixer")]
}

未完，待续...

avatar
文章
阅读
粉丝