Webpack 简易使用指南

Webpack 是前端的一个 JavaScript 模块打包工具，它能按照模块的依赖关系把一组松散的模块打包成符合生产环境部署的前端资源。除了打包 JS 外 Webpack 还能和 Sass、Less、TypeScript 一起使用，打包 scss 和 ts 或其它资源。

安装

Webpack 是用 Node.js 开发的，要使用 Webpack 还需要先安装 Node.js 。

全局安装

npm 全局安装：

npm install -g webpack

安装 webpack-cli：

npm install -g webpack-cli

从 Webpack4 开始需要安装 webpack-cli 才能使用。

安装完成后可以输入：

webpack -v

查看 Webpack 版本。

本地安装

安装之前需要先初始化项目，输入：

npm init

按照提示初始化项目。

npm 本地安装：

npm install --save-dev webpack

npm install --save-dev webpack-cli

安装完成后在 package.json 的 script 中加入执行脚本：

"build": "webpack --config webpack.config.js"

添加完成后大致如下：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

简单使用

创建一个 src 目录和一个 dist 目录，源代码可以放在 src 目录，打包完成的文件可以放在 dist 目录。

为了演示我会创建一个 hello.js 的模块文件和一个 main.js 的入口文件，这两个文件都放在 src 目录。

hello.js 模块文件的内容如下：

export default () => {
  const el = document.createElement('h1'); //  创建一个元素
  el.innerHTML = 'Hello WebPack'; //  设置元素的 innerHTML
  document.body.appendChild(el); //  把元素插入到 body
};

main.js 入口文件内容如下：

import hello from './hello';  //  引入模块
hello();  //  执行

创建一个 webpack.config.js 放在根目录作为 Webpack 的配置文件，webpack.config.js 内容如下：

const path = require('path'); //  Node.js 处理文件路径的模块

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
};

全局安装的打包命令如下：

webpack

如果配置文件没有问题的话可以看到如下信息：

Hash: a48e3f2803daf205ba96
Version: webpack 4.41.5
Time: 92ms
Built at: 2020-01-18 16:48:51
    Asset      Size  Chunks             Chunk Names
bundle.js  1.06 KiB       0  [emitted]  main       
Entrypoint main = bundle.js
[0] ./src/main.js + 1 modules 220 bytes {0} [built]
    | ./src/main.js 38 bytes [built]
    | ./src/hello.js 182 bytes [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

在 HTML 中引入打包后的 bundle.js 就可以使用了。

本地安装的打包命令如下：

npm run build

Loader

Loader 是 Webpack 中用来处理其它文件的一种加载项，有点类似于插件。Loader 可以用来转换 Sass、Less、ES6 之类的代码。

使用 Loader 你可以直接在 JS 文件中引入 CSS 或 Font 文件，然后打包为 JS 或单独的 CSS 文件。默认情况下 Webpack 是不能处理 JS 中引入的 CSS 之类的文件的，需要先下载 Loader 模块，处理 CSS 的 Loader 是 style-loader 和 css-loader 。

下载 style-loader 和 css-loader ：

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

配置 webpack.config.js ：

const path = require('path'); //  Node.js 处理文件路径的模块

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //  使用正则表达式来匹配文件后缀
        test: /\.css$/,
        //  调用 style-loader 和 css-loader
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
};

上面的 module 中的 rules 中的数组就是 Loader 的规则，这里的 Loader 规则就是使用正则表达式匹配后缀，如果匹配到就调用 use 中的 Loader 来处理。

创建一个 style.css 然后增加一些样式，在 main.js 中引入 style.css ：

import hello from './hello';  //  引入模块
import './style.css';  //  引入 CSS
hello();  //  执行

重新打包，style.css 和 hello.js 中的内容就会被打包到一个 JS 文件中。

接下来再配置一个 Sass ，让 Webpack 打包的时候顺便编译 Sass。

要让 Webpack 支持 Sass 还需要安装 sass-loader 和 node-sass ：

npm install --save-dev sass-loader node-sass

如果之前没有安装过 style-loader 和 css-loader 的话也需要安装。

如果在安装 sass-loader 和 node-sass 时出现如下的错误：

ERR! stack Error: Can't find Python executable "python"

以管理员模式打开命令行，输入：

npm install --global --production windows-build-tools

如果出现如下的提示：

---------- Visual Studio Build Tools ----------
Successfully installed Visual Studio Build Tools.
------------------- Python --------------------
Successfully installed Python 2.7

Now configuring the Visual Studio Build Tools and Python...

All done!

说明 Python 安装成功，可以继续安装 sass-loader 和 node-sass 。

安装完成后在 webpack.config.js 中添加配置信息：

const path = require('path'); //  Node.js 处理文件路径的模块

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //  使用正则表达式来匹配文件后缀
        test: /\.css$/,
        //  注册 style-loader 和 css-loader
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
};

可以在 src 目录创建一个 scss 文件，编写一些 Sass 独有的功能，然后在 main.js 中引入：

import hello from './hello';  //  引入模块
import './style.scss'  //  引入 scss
hello();  //  执行

重新打包后在 HTML 中引入打包后的 JS 文件就可以看到 Sass 的效果了。

Webpack 也还有很多实用的 Loader，例如处理 ES6 的 Loader 和处理 TypeScript 的 Loader。这里只是简单演示，所以只安装了处理 Sass 的 Loader。

插件

插件和 Loader 一样都能扩展 Webpack 的功能，但是插件的功能相比 Loader 要更强大一些。

上面的 CSS 和 Sass 都被打包到了 JS 中，在样式比较多的情况下还是比较影响性能的。

下面安装一个插件把打包后的 CSS 和 JS 分离开。

安装 mini-css-extract-plugin ：

npm install --save-dev mini-css-extract-plugin

配置 webpack.config.js ：

const path = require('path'); //  Node.js 处理文件路径的模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //  mini-css-extract-plugin 插件

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //  使用正则表达式来匹配文件后缀
        test: /\.css$/,
        //  注册 style-loader 和 css-loader
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: './public',
            },
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    //  mini-css-extract-plugin 插件
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
};

插件的配置信息需要写在 plugins 中，部分插件还需要配置 loader ，一般情况下在插件的官网或 Github 页面会有详细的使用说明。

使用了 mini-css-extract-plugin 插件后在 JS 中引入的 CSS 文件在打包后就会分离为独立的 CSS 和 JS。

Webpack 也还有很多插件，这里只是简单演示，所以就只安装了 mini-css-extract-plugin 。

配置本地服务器

在没有服务器的情况下，有的功能是无法测试的，例如 AJAX 或路由就需要在服务器环境下才能使用。

下面就来配置一个简单的本地服务器。

安装 webpack-dev-server ：

npm install --save-dev webpack-dev-server

在 webpack.config.js 中添加配置信息：

const path = require('path'); //  Node.js 处理文件路径的模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //  mini-css-extract-plugin 插件

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        //  使用正则表达式来匹配文件后缀
        test: /\.css$/,
        //  注册 style-loader 和 css-loader
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: 'dist',
            },
          },
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    //  mini-css-extract-plugin 插件
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
  devServer: {
    contentBase: 'dist',
    port: 8080,
    historyApiFallback: true,
    inline: true,
    overlay: true,
  },
};

其中 devServer 中的内容就是服务器的配置信息。

下面是一部分配置说明：

配置项	类型	说明
`contentBase`	String	服务器资源的目录，默认为项目根目录。
`port`	Number	服务器的端口号，默认为 8080 。
`host`	String	服务器的监听地址，默认为 127.0.0.1 。
`historyApiFallback`	Boolean	出现 404 时调转到 index，可用于路由跳转。
`inline`	Boolean	文件改变时自动刷新页面。
`overlay`	Boolean	打包出错时在浏览器上显示错误信息。

在 package.json 中的 script 区域添加执行脚本：

"server": "webpack-dev-server --open"

输入：

npm run server

启动服务器。

打开浏览器，输入 localhost:8080 就可以看到页面了。如果改变了文件内容，在保存后 Webpack 就会自动打包，打包完成后浏览器也会自动刷新。

如果要关闭服务器的话可以按 ctrl + c，输入 y 终止，或者也可以直接关闭命令行。

生成 Source map 文件

JS 文件在打包后会被压缩为一行，而且内容也会有变化。如果代码出现问题，根据浏览器的报错位置也很难查找到错误的代码。在这种情况下就需要 Source map 文件来辅助调试。

要开启 Source map 也很简单，在 webpack.config.js 中添加 devtool: 'source-map' ，如下：

const path = require('path'); //  Node.js 处理我呢见路径的模块

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  存放打包后的文件的位置
    path: path.resolve(__dirname, 'dist'),
    //  打包后的文件名
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: 'dist',
    port: 8080,
    historyApiFallback: true,
    inline: true,
    overlay: true,
  },
  devtool: 'source-map',
};

以上就是 Webpack 的简单使用指南，后面还会继续写 Webpack 相关的配置。

Sass 简单使用教程

本文地址：https://www.misterma.com/archives/850/

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。