Webpack 知识梳理

栏目: CSS · 发布时间: 5年前

内容简介：Node.js 是 javascript的服务器版本，Webpack 在执行打包压缩时是依赖 Node.js 的。安装 webpack-cli 才能在命令行运行 webpack 命令。index.js 文件：

entry（入口）

单入口——单页面应用

多入口——多页面应用
output（输出）

path: 输出路径（必须是绝对路径） path.resolve

filename: 输出文件名
loaders

编译文件
plugins（插件）

webpack 功能扩展

1.2 相关知识（Node.js & ES6 模块化）

1.2.1 Node.js

Node.js 是 javascript的服务器版本，Webpack 在执行打包压缩时是依赖 Node.js 的。

1.2.2 ES6 模块化

1.2.2.1 export 导出

//分别导出一个或几个变量(函数）
export let a = 1;
export const b = 2;
export function fn(){
    console.log('fn')
}

//导出一个对象
let a = 1;
const b = 2;
function fn(){
    console.log('fn')
}
export { a, b, fn };

//导出默认成员——仅能导出一个，默认引入的就是这一个
export default let a = 1;
复制代码

1.2.2.2 import 导入

//引入所有成员(as —— 给引入的值重命名)
import * as name from 'xxx'; 
//引入 default 成员
import a from 'xxx';   
//只引入：引入 css 或 函数
import 'xxx';
//异步引入
let a =import("./util");
复制代码

2.开始使用 Webpack —— 搭建项目

2.1 新建项目，安装 Webpack 依赖。

npm init
npm i webpack webpack-cli --save-dev
复制代码

安装 webpack-cli 才能在命令行运行 webpack 命令。

2.2 创建并配置 webpack.config.js

单入口 | 单输出根目录内新建 src 文件夹，新建 index.js 文件。

index.js 文件：

console.log('index')
复制代码

webpack.config.js 文件

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
  }
}
复制代码

多入口 | 多输出根目录内新建 src 文件夹，新建 index.js 及 home.js 文件。

index.js 文件：

console.log('index')
复制代码

home.js 文件：

console.log('home')
复制代码

webpack.config.js 文件

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  }
}
复制代码

2.3 配置 package.json 文件，验证基本配置

修改 script 属性：

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

运行 npm run build 执行 webpack 命令，验证输入输出配置。根目录内会生成 dist 文件夹，里面有对应的文件生成。

2.4 在 index.html 中引入打包好的 js 文件

方式一：手动引入新建 index.html，并直接手动引入 js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script src='./dist/index.min.js'></script>
<script src='./dist/home.min.js'></script>
</html>
复制代码

打开 index.html，即已成功引入编译好的 index.min.js 及 home.min.js，执行里面的代码。

3.plugins —— 扩展 webpack 功能

前面已经可以使用 webpack ，但开发过程中，每次都要手动引用 js 文件，更改代码后还要重新编译是很麻烦的，所以我们接下来看下 webpack 的 plugins，来便于开发。

3.1 自动生成 html

可通过插件 html-webpack-plugin ，由指定的 html 模板生成新的 html 文件，并自动引入所需 js 等内容。 1）执行 npm i html-webpack-plugin --save-dev 命令，安装依赖。 2）新建 index.ejs 文件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
复制代码

3）修改 webpack.config.js 的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML',  //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    })
  ]
}
复制代码

4）重新运行 npm run build ，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。

index.html 文件

<!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>New HTML</title></head><body><div id="root"></div><script type="text/javascript" src="index.min.js"></script><script type="text/javascript" src="home.min.js"></script></body></html>
复制代码

3.2 再次打包时删除旧文件

3.2.1 修改 `webpack.config.js`

将输出的 index.html 文件名改为其他的，如 indexNew.html

运行 npm run build ，生成的 dist

内文件列表如下：

之前生成的无用文件 index.html 还在，这里可以使用插件 clean-webpack-plugin 来删除 webpack.config.js 中 output.path

目录中的所有文件。

3.2.2 运行 `npm install clean-webpack-plugin --save-dev` 安装依赖。

3.2.3 修改 `webpack.config.js` 配置。

3.2.4 再次运行 `npm run build` ，生成的 `dist` 内文件列表如下：

可见之前生成的 index.html

文件已被删除。

3.3 自动打开 `html` 文件，支持热更新

3.3.1安装依赖

npm i open-browser-webpack-plugin webpack-dev-server --save-dev

3.3.2 修改 `webpack.config.js` 配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ]
}
复制代码

3.3.3 修改 `package.json`

添加 start ，使得运行 npm run start 可直接执行 webpack-dev-server 命令。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
复制代码

3.3.4 测试

执行 npm run start ： 1）浏览器会自动打开 http://localhost:8080 ； 2）修改 index.js 文件，保存文件，浏览器会自动刷新，更新内容。

3.4 代码调试定位 —— sourcemap

代码经过编译、打包后，与源代码已有很大差异，不便于调试。

source-map 会解决这个问题，生成 .map 文件，便于错误定位调试。

开启方法：在 webpack.config.js 文件中添加一行配置： devtool: "source-map"

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  //编译前文件调试
  devtool: "source-map"
}
复制代码

如上，即可。可通过打印等方式进行测试。

4. loader

loader ——文件编译。

4.1 ES6 & React 编译 —— babel-loader

Babel 是一个 JavaScript 编译器，Webpack 使用 babel-loader 来编译 ES6。此处我们要创建一个 React 项目，所以同时也要见天 React 的相关依赖即配置。

4.1.1 安装依赖

yarn add babel babel-core babel-loader@7.1.2 babel-preset-env babel-preset-react 注：现在直接安装 babel-core 和 babel-loader，安装的版本不对应会报错，所以我在安装时指定了 babel-loader 的版本，避免这个问题。

4.1.2 修改 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ["env", "react"],
          }
        }],
        exclude: /node_modules/
      }
    ]
  }
}
复制代码

4.1.3 修改 index.js 及 home.js 文件为 react 语法

home.js文件

import React, { Component } from 'react';

export default class Home extends Component {

  render() {
    return (
      <div style={{backgroundColor: '#0f0'}}>
        home page
      </div>
    );
  }
}
复制代码

index.js文件

import React from 'react';
import { render } from 'react-dom';
import Home from './home';

render(<Home/>, document.getElementById('root'));
复制代码

此时，页面效果如下：

如上，React 语法被成功编译。

4.2 处理 CSS 文件 —— style-loader & css-loader

4.2.1 创建 index.css 文件

.container {
    background-color: aquamarine
}
复制代码

修改 home.js 文件如下：

import React, { Component } from "react";
import './index.css'

export default class Home extends Component {
  render() {
    return (
      <div className="container">
        home page
      </div>
    );
  }
}
复制代码

4.2.2 `npm run start` 重新启动项目，项目会报错如下：

4.2.3 安装依赖

npm i style-loader css-loader --save-dev

4.2.4 修改 webpack.config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].min.js' //name为对应入口文件的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: 'New HTML', //打包后生成 html 的 title
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.ejs' // 根据此模版生成 HTML 文件
    }),
    // 默认情况下，此插件将删除 webpack output.path目录中的所有文件。
    new CleanWebpackPlugin(),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ["env", "react"],
          }
        }],
        exclude: /node_modules/
      },
      {
        test: /\.css$/i, // 针对 .css 后缀的文件设置 loader
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
复制代码

添加了针对 .css 文件的 loader，来对 .css 文件进行处理。

注：

css-loader：读取并编译 js 中引入的 css 文件
style-loader： html 中创建一个 <style></style> 标签，里面是 css-loader 解析出的 css 样式。
webpack 配置中，style-loader 必须在 css-loader 之前， 顺序不可变 ，即必须先由 css-loader 处理，再由 style-loader 处理。

4.3 处理 LESS 文件 —— less-loader

4.3.1 创建 index.less 文件如下：

.container {
    background-color: aquamarine
}
复制代码

修改 home.js 文件如下：

import React, { Component } from "react";
import './index.less'

export default class Home extends Component {
  render() {
    return (
      <div className="container">
        home page
      </div>
    );
  }
}
复制代码

4.3.2 安装依赖

npm i less less-loader --save-dev

4.3.3 修改 webpack.config.js 配置，module/rules 下添加对于 less 文件的解析：

{
    test: /\.less$/, // 针对 .less 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'less-loader']
}
复制代码

4.3.4 重新启动项目，less 文件生效，页面效果如下：

4.4 添加浏览器前缀 —— postcss-loader & autoprefixer

autoprefixer 按照浏览器使用量决定需要添加哪些浏览器前缀，postcss-loader 按照 autoprefixer 的结果来添加浏览器前缀。

4.4.1 修改 index.less 文件如下：

.container {
    background-color: aquamarine;
    transform: rotate(0deg);
    transition-duration: 1000ms;
}
.container:hover {
    background-color: aquamarine;
    transform: rotate(360deg)
}
复制代码

4.4.2 安装依赖

npm i less postcss-loader autoprefixer --save-dev

4.4.3 修改 webpack.config.js 配置，给 css、less 文件添加 postcss-loader 的解析，

有两种方式： 1）在 webpack.config.js 的 modele/rules 内指定 postcss-loader 的配置

{
    test: /\.css$/, // 针对 .css 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', {
        loader: 'postcss-loader',
        options: {
        plugins: [require('autoprefixer')]
        }
    }]
},
{
    test: /\.(less|css)$/, // 针对 .less 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'less-loader', {
      loader: 'postcss-loader',
      options: {
        plugins: [require('autoprefixer')]
      }
    }]
}
复制代码

2）修改 webpack.config.js，并单独创建 postcss.config.js ，进行配置修改webpack.config.js 文件，modele/rules 添加如下配置：

{
    test: /\.css$/, // 针对 .css 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
    test: /\.(less|css)$/, // 针对 .less 后缀的文件设置 loader
    use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}
复制代码

postcss.config.js 文件

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

相对比而言，我更倾向于第一种，以免创建太多的配置文件，造成混乱。

4.4.4 重新启动项目，查看浏览器元素，样式前缀已添加成功。

注：

如有需要，可以自己进行支持的浏览器版本配置，有两种方式： 1）添加 .broserslistrc 文件，进行配置

last 3 version	//支持每个版本的最近三个版本
>2%   //大于百分之二的用户使用
复制代码

2）无需创建新文件，直接在 package.json 文件内添加属性进行配置

"browserslist": [
    "last 5 version",
    " >1%"
  ]
复制代码

重新启动，效果如下：

按照设置的规则重新对我们的 css 样式添加了前缀。

4.5 处理图片 —— file-loader & url-loader

4.5.1 引入图片

src 文件夹下创建 images 文件夹，并添加 bg.png 图片

修改 index.less 文件如下：

.container {
    width: 100%;
    height: 600px;
    background: url('./images/bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
复制代码

重新启动项目，会报错如下：

4.5.2 安装依赖 —— file-loader

如上，需要配置对应的 loader 来解析图片。

执行 npm i file-loader --save-dev ，安装依赖。

4.5.3 更改配置 —— file-loader

修改 webpack.config.js 配置, modole/rule 下添加配置如下：

{
    test: /\.(png|jpg|jpeg|gif)$/i, // 针对 .png|.jpg|.jpeg | .gif 后缀的图片设置 loader
    use: [{
      loader: 'file-loader',
      options: {
        outputPath: 'imgs/', //相对于 output.path 的输出目录
      }
    }]
}
复制代码

重启项目，则引入图片成功，效果如下：

file-loader 可以解析项目中的图片引入，根据配置，将图片输出到相应路径，并修改打包后文件中的引用路径，使其指向打包后的文件。

4.5.4 安装依赖 —— url-loader

针对图片引用，url-loader 封装了 file-loader。增加了 limit 属性，文件大小大于 limit 值，会调用 file-loader 进行处理；文件大小小于 limit 值，会将文件转为 base64 格式，以减少文件请求次数。安装 url-loader 依赖

npm i url-loader --save-dev

4.5.5 更改配置 —— url-loader

修改 webpack.config.js 配置, modole/rule 下添加配置如下：

{
        test: /\.(png|jpg|jpeg|gif)$/i, // 针对 .png|.jpg|.jpeg | .gif 后缀的图片设置 loader
        use: [{
          loader: 'url-loader',
          options: {
            outputPath: 'imgs/', //相对于 output.path 的输出目录
            limit: 8*1024 //大于此数值依旧用 file-loader处理，打包到 imgs 里面，小于此数值的转为 base64，以减少文件请求次数
          }
        }]
      }
复制代码

重启项目，图片引用成功，执行 npm run build ，可发现，大于 8k 的图片会被打包到 dist/imgs 文件夹内，小于 8k 的则不会被打包输出，而是转为 base64 。

4.6 处理文字 —— file-loader & url-loader

4.6.1 引入字体

src 文件夹下一个字体文件——difital-7.ttf，这是一个液晶字体文件，修改 index.less 文件如下：

@font-face{
    font-family: "digital";
    src: url(./digital-7.ttf);
}
.container {
    width: 100%;
    height: 600px;
    background: url('./images/bgimg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: "digital"
}
复制代码

保存项目编译后，会报错如下：

4.6.2 更改配置

同图片，需要配置对应的 url-loader 来解文字片，修改 webpack.config.js 配置, modole/rule 下添加配置如下：

{
    test: /\.(eot|svg|ttf|woff|woff2)$/i, // 针对 eot|svg|ttf|woff|woff2 后缀的字体设置 loader
    use: [{
        loader: 'url-loader',
        options: {
        outputPath: 'fonts/', //相对于 output.path 的输出目录
        limit: 4*1024 //大于此数值依旧用 file-loader处理，打包到 fonts 里面，小于此数值的转为 base64，以减少文件请求次数
        }
    }]
}
复制代码

重新启动项目，则字体引用成功，效果如下：

通过修改 limit 值，重新打包，可测试 limit 值设置是否有效。

未完待续...

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Cascading Style Sheets 2.0 Programmer's Reference

Eric A. Meyer / McGraw-Hill Osborne Media / 2001-03-20 / USD 19.99

The most authoritative quick reference available for CSS programmers. This handy resource gives you programming essentials at your fingertips, including all the new tags and features in CSS 2.0. You'l......一起来看看《Cascading Style Sheets 2.0 Programmer's Reference》这本书的介绍吧!

码农工具