webpack v4.43.0 开发文档

一个前端资源加载/打包工具

准备工作

  1. 安装 NodeJS
  2. npm 初始化 npm init，或者使用 yarn 初始化 yarn init，生成 package.json 文件

安装webpack

这里我们使用本地安装最新版本的webpack，目前最新版本是 v4.43.0

在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。请在 npm 文档 中查找更多信息。

1
npm install --save-dev webpack

使用 webpack 4+ 版本，还需要安装 CLI

1
npm install --save-dev webpack-cli

调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口，这可以防止意外发布你的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

使用yarn安装webpack

1
yarn add webpack@3.10.0 --dev

配置文件

创建配置文件 webpack.config.js

一个简单的配置文件

1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};
  • entry 需要打包的js文件
  • output 打包后配置信息
    • filename 打包后的js文件

管理资源 – 加载 CSS

安装扩展

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader：

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

配置文件

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
module: {
    rules: [
        {
            test: /\.css$/
            , use: [
                'style-loader'
                , 'css-loader'
            ]
        }
    ]
}

入口文件

引入样式文件

1
import './style.css';

管理资源 – 加载图片

多版本webpack共存解决方案

需要处理的文件类型

  • HTML -> html-webpack-plugin

  • 脚本 -> babel + babel-preset-react

    1
    2
    3
    yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev
    yarn add babel-preset-react@6.24.1 --dev
    yarn add react@16.2.0 react-dom@16.2.0

  • 样式 -> css-loader + sass-loader

    1
    2
    3
    4
    yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
    yarn add extract-text-webpack-plugin@3.0.2 --dev
    yarn add sass-loader@6.0.6 --dev
    yarn add node-sass@4.7.2 --dev

  • 图片/字体 -> url-loader + file-loader

    1
    2
    yarn add file-loader@1.1.6 url-loader@0.6.2 --dev
    yarn add font-awesome

webpack常用模块

  • html-webpack-plugin - html单独打包成文件

    1
    yarn add html-webpack-plugin@2.30.1 --dev

  • extract-text-webpack-plugin - 样式打包成单独文件

  • CommonsChunkPlugin - 提出通用模块

webpack-dev-server

  • 为webpack项目提供web服务
  • 使用版本：2.9.7
  • 更改代码自动刷新，路径换发
  • yarn add webpack-dev-server@2.9.7 –dev
  • 解决多版本共存问题
    1
    node_modules/.bin/webpack
0%