webpack入门

WebpackCourse

This Repository will study Webpack

chapter 1: Webpack介绍

1.1 为什么要用Webpack

前端本可以直接HTML、CSS、Javascript就上了,不过如果要处理文件依赖、文件合并压缩、资源管理、使用新技术改善生活的时候,就得利用工具来辅助了。

以往有常见的模块化工具RequireJS,SeaJS等,构建工具Grunt、Gulp等,新的技术Sass、React、ES6、Vue等,要在项目中使用这些东西,不用工具的话就略麻烦了。

其实简单地说要聚焦两点:模块化以及自动构建。

模块化可以使用RequireJS来处理依赖,使用Gulp来进行构建;也可以使用ES6新特性来处理模块化依赖,使用webpack来构建

两种方式都狠不错,但潮流所驱,后者变得愈来愈强大,当然也不是说后者就替代了前者,只是大部分情况下,后者更好

1.2 什么是Webpack

如其名,Web+Pack 即web的打包,主要用于web项目中打包资源进行自动构建。

Webpack将所有资源视为JS的模块来进行构建,所以对于CSS,Image等非JS类型的文件,Webpack会使用相应的加载(loader)器来加载成其可识别的JS模块资源

通过配置一些信息,就能将资源进行打包构建,更好地实现前端的工程化

chapter 2: 安装

2.1 前提条件

在开始之前,请确保安装了Node.js的最新版本.使用Node.js最新的长期支持版本(LTS - Long Term Support),是最理想的起步.

2.2 本地安装

要安装最新版本

1
2
3
4
5
6
npm install -D webpack
-D 实际上是简写 --dev-save

devDependencies 开发时的依赖 webpack
dependencies 永久的依赖 jquery
webpack版本与版本之间 差异是有

要安装特定版本

1
npm install -D webpack@<version>

如果你使用Webpack 4+ 版本, 你还需要安装CLI.

1
npm install -D webpack-cli

对于大多数项目, 我们建议本地安装.这可以使我们在引入破坏式变更的依赖时,更容易分别升级项目.通常,Webpack通过运行一个或多个npm scripts, 会在本地 node_modules 目录中查找安装的Webpack:

1
2
3
"script": {
"start": "webpack --config webpack.config.js"
}

当你在本地安装webpack后, 你能够从 node_modules/.bin/webpack 访问它的bin版本.

2.3 全局安装

以下的NPM安装方式, 将使webpack在全局环境下可用:

1
npm install -g webpack

2.4 配置项简介

  1. Entry

    入口文件配置,Webpack执行构建的第一步将从entry开始,完成整个工程的打包

  2. Module

    模块,在Webpack里,一切皆模块,Webpack会从配置的entry开始递归找出所有依赖的模块,最常用的是rules配置项,功能是匹配对应的后缀,从而针对代码文件完成格式转换和压缩合并等指定的操作.

  3. Loader

    模块转换器,用于把模块原内容按照需求转换成新内容,这个是配合Module模块中的rules中的配置项来使用.

  4. Plugins

    扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情.(插件API)

  5. Output

    输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果,配置项用于指定输出文件夹,默认是./dist

2.5 总结

安装webpack的前提条件是要安装Node.js

我们推荐本地安装webpack, 命令是: npm install -D webpack webpack-cli

chapter 3: 起步

3.1 基本安装

首先我们创建一个目录, 初始化npm,然后在本地安装webpack,接着安装webpack-cli(此工具用于在命令行中运行webpack):

1
2
3
mkdir start 
npm init -y
npm install webpack webpack-cli -D

现在我们将创建以下目录结构 文件 和内容:

project:

1
2
3
4
5
handleA
|- index.html
|- /src
|- index.js
|- mixin.js

src/mixin.js

1
2
3
4
5
6
function content(con) {
var element = document.createElement('div');

element.innerHTML = 'Hello, ' + con;
return element;
}

src/index.js

1
document.body.appendChild(content("webpack"));

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>起步</title>
</head>
<body>
<!-- index.js 依赖mixin -->
<script src="./src/mixin.js"></script>
<!-- 只有先引入mixin 才可以让index.js正常执行 -->
<script src="./src/index.js"></script>

<!-- 以上引入方式的问题:
如果依赖不存在,或者引入顺序错误, 应用程序将无法正常运行.
如果依赖被引入但是并没有使用,浏览器将被迫下载无用代码
-->
</body>
</html>

3.2 创建一个main文件

首先,我们稍微调整下目录结构,将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载:

project

1
2
3
4
5
6
7
8
handleB
|- package.json
|- .npmrc
|- /dist
|- index.html
|- /src
|- index.js
|- mixin.js

刚才我们通过两次script标签 引入 并确定了两个js文件的先后顺序.下面我们通过import 或者 require 方式引入mixin.js

src/index.js

1
2
3
4
5
// var content = require('./mixin');
import content from "./mixin";


document.body.appendChild(content("webpack"));

src/mixin.js

1
2
3
4
5
6
module.exports = function (con) {
var element = document.createElement('div');

element.innerHTML = 'Hello, ' + con;
return element;
}

.npmrc

1
registry=https://registry.npm.taobao.org

3.3 使用一个配置文件

在webpack 4 中,可以无须任何配置使用, 然而大多数项目会需要很复杂的设置, 这就是为什么 webpack 仍然需要支持 配置文件. 这比在终端(terminal)中手动输入大量命令要高效的多.接下来我们看看配置文件怎么写?

project

1
2
3
4
5
6
7
8
handleC
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
|- mixin.js

webpack.config.js

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

module.exports = {
// 打包的入口点
entry: './src/index.js',
// 打包的输出点
output: {
// 打包之后输出文件的名称
filename: 'bundle.js',
// 打包之后输出文件的路径
path: path.resolve(__dirname, 'dist')
}
}

src/index.js

1
2
 var content = require('./mixin');
document.body.appendChild(content("webpack"));

src/mixin.js

1
2
3
4
5
6
module.exports = function (con) {
var element = document.createElement('div');

element.innerHTML = 'Hello, ' + con;
return element;
}

3.4 总结

webpack 的基本使用方式

  1. 创建webpack.config.js
  2. 指定项目打包的入口
  3. 指定项目打包后文件的名称和输出路径

chapter 4: 配置代码错误源

webpack.config.js

1
devtool: 'inline-source-map'

|

chapter 5: 加载CSS

5.1 下载包

1
npm install -D style-loader css-loader

5.2 引入资源

src/js/index.js

1
2
// 引入css
import '../css/main.css'

5.3 配置webpack.config.js

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

chapter 6: 加载图片

6.1 下载包

1
npm install -D file-loader

6.2 引入资源

1
const imgSrc = require('../image/chrome.png');

6.3 配置webpack.config.js

1
2
3
4
5
6
7
8
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
use: ['file-loader']
}
]
}

chapter 7: 加载字体

7.1 下载字体

7.2 定义字体

1
2
3
4
@font-face {
font-family: 'wanlum';
src: url("../fonts/Raleway.ttf");
}

7.3 使用字体

1
2
3
4
5
div {
font-family: 'wanlum';
color: red;
font-size: 30px;
}

7.4 配置webpack.config.js

1
2
3
4
5
6
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}

chapter 8: 编译ES6

8.1 下载包

1
npm install -D babel-cli babel-preset-env babel-loader

8.2 编辑配置文件 .babelrc

1
2
3
4
5
{
"presets": [
"env"
]
}

8.3 配置webpack.config.js

1
2
3
4
5
6
7
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}

chapter 9: less编译成css

9.1 下载包

1
npm install less-loader less -D

9.2 配置包

1
2
3
4
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
},

chapter 10: html自动生成

10.1 下载包

1
npm install -D html-webpack-plugin

10.2 引入包

1
const HtmlWebpackPlugin = require('html-webpack-plugin');

10.3 配置包

1
2
3
4
5
plugins: [
new HtmlWebpackPlugin({
title: '使用HtmlWebpackPlugin'
})
]

chapter 11: 清理dist目录

11.1 下载包

1
npm install -D clean-webpack-plugin

11.2 引入包

1
const CleanWebpackPlugin = require('clean-webpack-plugin');

11.3 配置包

1
new CleanWebpackPlugin(['dist'])

chapter 12: 自动编译实时加载

12.1 下载包

1
npm install -D webpack-dev-server

12.2 配置包

1
2
3
devServer: {
contentBase: './dist'
}

12.3 配置启动项

1
"start": "webpack-dev-server --config webpack.config.js"

chapter 13: 热替换

13.1 配置

1
2
3
4
5
6
7
8
9
10
11
12
plugins: [
new HtmlWebpackPlugin({
title: '使用HtmlWebpackPlugin'
}),
new CleanWebpackPlugin(['dist']),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.resolve(__dirname,'dist'),
hot: true
}