Webpack 知识梳理

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

内容简介：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 值设置是否有效。

未完待续...

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

查看所有标签

猜你喜欢:

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

码农书籍

Programming PHP

Rasmus Lerdorf、Kevin Tatroe、Peter MacIntyre / O'Reilly Media / 2006-5-5 / USD 39.99

Programming PHP, 2nd Edition, is the authoritative guide to PHP 5 and is filled with the unique knowledge of the creator of PHP (Rasmus Lerdorf) and other PHP experts. When it comes to creating websit......一起来看看《Programming PHP》这本书的介绍吧!

码农工具