webpack基础篇|博客系列

# 一、基本使用

# 1.1 初始化项目

首先我们创建一个目录, 并初始化npm:

$ mkdir webpack-basic && cd webpack-basic
$ npm init -y

@前端进阶之旅: 代码已经复制到剪贴板

(使用-y初始化npm会帮助我们生成一个默认的package.json配置)

# 1.2 本地安装webpack

前面已经提到过, 文章采用的webpack版本号是>4.0的, 由于webpack与webpack-cli已经分开了, 我们需要分别安装它们(如果你使用的webpack版本号小于4.0则只需要安装webpack就可以了)

在webpack-basic的根目录下执行指令:

$ npm install webpack webpack-cli --save-dev

@前端进阶之旅: 代码已经复制到剪贴板

此时会发现package.json里的devDependencies中多出了你刚刚安装的webpack和webpack-cli.

# 1.3 创建bundle文件

完成以上步骤之后, 让我们来编写一个简单的页面来看看效果.

首先在根目录下创建一个src文件夹, 并在其中创建一个index.js文件
在根目录下创建一个dist文件夹, 并在其中创建一个index.html文件

之后, 项目结构就变成了这样:

 webpack-basic
 	|- package.json
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

@前端进阶之旅: 代码已经复制到剪贴板

让我们在其中加上一些内容:

// src/index.js
function component() {
    var element = document.createElement('div');

    element.innerHTML = "Hello Webpack";

    return element;
}

document.body.appendChild(component());

@前端进阶之旅: 代码已经复制到剪贴板

<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack起步</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>

@前端进阶之旅: 代码已经复制到剪贴板

index.js还好理解, 但是你可能会注意到index.html中引入了一个main.js , 但是这个js文件我们没有看到在哪里呀.

别急, 这里的main.js就是我们接下来要经过webpack打包之后生产的文件, 只不过在这里我们先提前引入进来了.

# 1.4 执行webpack打包

编写完以上代码之后, 我们就可以在根目录下使用此命令来进行打包了:

$ npx webpack

@前端进阶之旅: 代码已经复制到剪贴板

此时你会看到dist文件夹下就多出了一个main.js文件, 并且打开index.html , 会看到页面上显示了: “Hello Webpack”.

可能你会有点糊了, 明明我们什么也没有配置, 它怎么就能够生成main.js呢.

像这种在webpack4没有任何webpack配置的情况下, webpack会为你提供一套默认的配置.

将src/index.js作为入口起点(也就是entry选项)
将dist/main.js作为输出(也就是output选项)

用官网的话来说就是:

执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js。

Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack)

# 二、使用配置文件

通过上面👆的案例, 我们知道, 在webpack4中如果你没有任何配置文件时, 它会为你提供一套默认的配置.

但是在webpack3中, 这样是不允许的, 必须得有一个webpack.config.js文件来指定入口出口.

不过如果你是用webpack4开发的话, 在实际使用中,你也还是需要一个webpack.config.js文件来进行一些复杂的设置.

# 2.1 webpack.config.js

让我们在项目的根目录下创建一个叫webpack.config.js的文件, 并且在其中写上一些基本的配置:

// webpack.config.js
const path = require('path')

module.exports = {
   entry: './src/index.js',
   output: {
   	filename: 'bundle.js',
   	path: path.resolve(__dirname, 'dist')
   }
}

@前端进阶之旅: 代码已经复制到剪贴板

现在让我们重新使用命令来进行构建:

$ npx webpack --config webpack.config.js

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production'，来启用环境默认值。)

@前端进阶之旅: 代码已经复制到剪贴板

可以看到, 这次它也成功的完成了构建, 不过相对于之前的执行语句, 我们多了一段:

--config webpack.config.js

@前端进阶之旅: 代码已经复制到剪贴板

其实这个命令的作用就是 指定以哪个配置文件进行构建, 比如我们这里就是指定了webpack.config.js这个文件.

不过其实在这里你也可以不要这段语句, 因为webpack命令默认会选择使用它.

只不过如果你的配置文件不叫webapck.config.js, 而是比如叫做webpack.other.config.js, 你就得指定它了.

现在, webpack根据你的配置, 入口处为src/index.js, 出口文件为dist/bundle.js.

我们也得重新修改一下dist/index.html的引入了:

<script src="bundle.js"></script>

@前端进阶之旅: 代码已经复制到剪贴板

通过这种配置文件的方式, 让我们使用起来更加的灵活, 而且, 我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options)，以及许多其他增强功能。

# 2.2 NPM脚本

在上面👆, 我们是使用npx webpack这样的CLI方式来运行本地的webpack的:

$ npx webpack

@前端进阶之旅: 代码已经复制到剪贴板

其实这样是不太方便的, 我们可以设置一个快捷方式. 在package.json中添加一个npm脚本:

{
    "name": "webpack-basic",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
+       "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    },
    "dependencies": {
        "lodash": "^4.17.15"
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

在scripts中新加了一个配置"build: "webpack".

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。

$ npm run build

@前端进阶之旅: 代码已经复制到剪贴板

现在用此命令工具执行出来的效果和上面👆介绍的是一样的.

# 三、管理资源

让我们来回顾一下上面👆讲解的项目目录:

 webpack-basic
 	|- package.json
 	|- webpack.config.js
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

@前端进阶之旅: 代码已经复制到剪贴板

可以看到, 上面的案例只允许了我们使用js文件来进行构建, 但是在实际开发中, 我们不可能只有js文件, 若是我们要使用css、图片、字体这些资源怎么办?

别担心, webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。

# 3.1 加载CSS

首先让我们以加载css文件来认识一下loader.

# style-loader和css-loader

为了从js模块中导入一个css文件, 比如你想在index.js中引入一个css文件:

// index.js
import './style.css'

// 或者用require()的方式
const style = require('./style.css')

@前端进阶之旅: 代码已经复制到剪贴板

你需要在项目中(也就是module配置中), 安装并添加这两个loader:

style-loader
css-loader

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

@前端进阶之旅: 代码已经复制到剪贴板

并且在webpack.config.js中进行配置:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

我们在webpack.config.js中新增了一个module的配置.

这里配置的意思是:

# 一、基本使用

# 1.1 初始化项目

首先我们创建一个目录, 并初始化npm:

$ mkdir webpack-basic && cd webpack-basic
$ npm init -y

@前端进阶之旅: 代码已经复制到剪贴板

(使用-y初始化npm会帮助我们生成一个默认的package.json配置)

# 1.2 本地安装webpack

在webpack-basic的根目录下执行指令:

$ npm install webpack webpack-cli --save-dev

@前端进阶之旅: 代码已经复制到剪贴板

此时会发现package.json里的devDependencies中多出了你刚刚安装的webpack和webpack-cli.

# 1.3 创建bundle文件

完成以上步骤之后, 让我们来编写一个简单的页面来看看效果.

首先在根目录下创建一个src文件夹, 并在其中创建一个index.js文件
在根目录下创建一个dist文件夹, 并在其中创建一个index.html文件

之后, 项目结构就变成了这样:

 webpack-basic
 	|- package.json
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

@前端进阶之旅: 代码已经复制到剪贴板

让我们在其中加上一些内容:

// src/index.js
function component() {
    var element = document.createElement('div');

    element.innerHTML = "Hello Webpack";

    return element;
}

document.body.appendChild(component());

@前端进阶之旅: 代码已经复制到剪贴板

<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack起步</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>

@前端进阶之旅: 代码已经复制到剪贴板

index.js还好理解, 但是你可能会注意到index.html中引入了一个main.js , 但是这个js文件我们没有看到在哪里呀.

别急, 这里的main.js就是我们接下来要经过webpack打包之后生产的文件, 只不过在这里我们先提前引入进来了.

# 1.4 执行webpack打包

编写完以上代码之后, 我们就可以在根目录下使用此命令来进行打包了:

$ npx webpack

@前端进阶之旅: 代码已经复制到剪贴板

此时你会看到dist文件夹下就多出了一个main.js文件, 并且打开index.html , 会看到页面上显示了: “Hello Webpack”.

可能你会有点糊了, 明明我们什么也没有配置, 它怎么就能够生成main.js呢.

像这种在webpack4没有任何webpack配置的情况下, webpack会为你提供一套默认的配置.

将src/index.js作为入口起点(也就是entry选项)
将dist/main.js作为输出(也就是output选项)

用官网的话来说就是:

执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js。

Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack)

# 二、使用配置文件

通过上面👆的案例, 我们知道, 在webpack4中如果你没有任何配置文件时, 它会为你提供一套默认的配置.

但是在webpack3中, 这样是不允许的, 必须得有一个webpack.config.js文件来指定入口出口.

不过如果你是用webpack4开发的话, 在实际使用中,你也还是需要一个webpack.config.js文件来进行一些复杂的设置.

# 2.1 webpack.config.js

让我们在项目的根目录下创建一个叫webpack.config.js的文件, 并且在其中写上一些基本的配置:

// webpack.config.js
const path = require('path')

module.exports = {
   entry: './src/index.js',
   output: {
   	filename: 'bundle.js',
   	path: path.resolve(__dirname, 'dist')
   }
}

@前端进阶之旅: 代码已经复制到剪贴板

现在让我们重新使用命令来进行构建:

$ npx webpack --config webpack.config.js

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production'，来启用环境默认值。)

@前端进阶之旅: 代码已经复制到剪贴板

可以看到, 这次它也成功的完成了构建, 不过相对于之前的执行语句, 我们多了一段:

--config webpack.config.js

@前端进阶之旅: 代码已经复制到剪贴板

其实这个命令的作用就是 指定以哪个配置文件进行构建, 比如我们这里就是指定了webpack.config.js这个文件.

不过其实在这里你也可以不要这段语句, 因为webpack命令默认会选择使用它.

只不过如果你的配置文件不叫webapck.config.js, 而是比如叫做webpack.other.config.js, 你就得指定它了.

现在, webpack根据你的配置, 入口处为src/index.js, 出口文件为dist/bundle.js.

我们也得重新修改一下dist/index.html的引入了:

<script src="bundle.js"></script>

@前端进阶之旅: 代码已经复制到剪贴板

# 2.2 NPM脚本

在上面👆, 我们是使用npx webpack这样的CLI方式来运行本地的webpack的:

$ npx webpack

@前端进阶之旅: 代码已经复制到剪贴板

其实这样是不太方便的, 我们可以设置一个快捷方式. 在package.json中添加一个npm脚本:

{
    "name": "webpack-basic",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
+       "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    },
    "dependencies": {
        "lodash": "^4.17.15"
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

在scripts中新加了一个配置"build: "webpack".

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。

$ npm run build

@前端进阶之旅: 代码已经复制到剪贴板

现在用此命令工具执行出来的效果和上面👆介绍的是一样的.

# 三、管理资源

让我们来回顾一下上面👆讲解的项目目录:

 webpack-basic
 	|- package.json
 	|- webpack.config.js
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

@前端进阶之旅: 代码已经复制到剪贴板

别担心, webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。

# 3.1 加载CSS

首先让我们以加载css文件来认识一下loader.

# style-loader和css-loader

为了从js模块中导入一个css文件, 比如你想在index.js中引入一个css文件:

// index.js
import './style.css'

// 或者用require()的方式
const style = require('./style.css')

@前端进阶之旅: 代码已经复制到剪贴板

你需要在项目中(也就是module配置中), 安装并添加这两个loader:

style-loader
css-loader

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

@前端进阶之旅: 代码已经复制到剪贴板

并且在webpack.config.js中进行配置:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

我们在webpack.config.js中新增了一个module的配置.

这里配置的意思是: