深入浅出，Webpack

Webpack是如今前端工具链中不可或缺的一部分，它可以帮助工程师在项目开发中更高效的处理代码。本文将详细讲解Webpack的使用方法，以及配合实例来解释它的重要性。

### Webpack的基本概念

Webpack是一个模块打包工具，类似于grunt和gulp。但是不同于这些常见的构建工具，Webpack拥有强大的模块化功能。Webpack每一份代码都能够被视为一个模块，而Webpack将这些模块合并成成一个整体。

在Webpack中，入口文件（entry）是整个打包过程的起点，从这个起点开始，Webpack会对模块进行依赖分析，形成一颗依赖关系图，将项目中所有的模块打包成一个或多个bundle.js文件。

### Webpack的安装

Webpack可以全局或者本地安装。如果我们需要在多个项目中使用Webpack，则可以考虑全局安装。

```

npm install webpack -g

```

本地安装可以在项目中运行Webpack，同时不会影响全局安装环境。

```

npm install webpack --save-dev

```

### Webpack的基本配置

Webpack的配置文件通常是webpack.config.js。

一个合理的Webpack配置文件应该包含以下几个关键字：

- entry 入口文件

- output 输出配置

- module 模块处理配置

- resolve 解析配置

下面是一个简单的例子：

``` javascript

module.exports = {

entry: 'entry.js',

output: {

path: __dirname + '/dist',

filename: 'bundle.js'

},

module: {

rules: [

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

}

]

},

resolve: {

extensions: ['.js']

}

}

```

### Webpack的常见loader

Webpack在读取模块时，可以对模块内容进行处理，处理方式就是通过loader来完成的。

#### Babel-loader

Babel-loader是一个被广泛采用的Webpack插件。它的作用是把ES6/ES7/ES8的代码转化为ES5的代码，以让浏览器兼容。Babel-loader的安装非常简单，只需要执行以下两句话即可。

```

npm install babel-loader babel-core babel-preset-env --save-dev

npm install babel-polyfill --save

```

配合Webpack的使用:

``` javascript

module.exports = {

// ...

module: {

rules: [

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

}

]

},

// ...

};

```

#### CSS-loader

CSS-loader在处理CSS文件时，可以遍历CSS的导入关系，最终将CSS样式打包到页面中。

配合Webpack的使用:

``` javascript

module.exports = {

// ...

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader'],

exclude: /node_modules/

}

]

},

// ...

};

```

#### Less-loader

Less-loader可以将Less转化为CSS，并交由CSS-loader进行处理。

``` javascript

module.exports = {

// ...

module: {

rules: [

{

test: /\.less$/,

use: ['style-loader', 'css-loader', 'less-loader']

}

]

},

// ...

};

```

#### Image-loader

Image-loader可以实现图片的优化，比如压缩、缩小、合并等。

``` javascript

module.exports = {

// ...

module: {

rules: [

{

test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

loader: 'url-loader',

options: {

limit: 10000

}

}

]

},

// ...

};

```

### Webpack插件

Plugin是Webpack提供的一个机制，能够在整个打包过程中执行一些额外的任务。

#### 1. HtmlWebpackPlugin

HtmlWebpackPlugin是一个能够在Webpack打包结束后自动生成html文件的插件。我们可以在html文件中自动插入打包后的js文件。

``` javascript

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

module.exports = {

// ...

plugins: [new HtmlWebpackPlugin({

template: path.join(__dirname, 'public/index.html'),

inject: true

})],

// ...

};

```

#### 2. UglifyJsPlugin

UglifyJsPlugin能够压缩我们JS代码，使得JS文件变得更小，进而提高页面加载速度。

``` javascript

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

// ...

plugins: [new UglifyJsPlugin({

uglifyOptions: {

output: { comments: false },

warnings: false

}

})],

// ...

};

```

#### 3. ExtractTextPlugin

ExtractTextPlugin能够将CSS打包成单独的文件在页面上引用。

``` javascript

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

// ...

plugins: [new ExtractTextPlugin({

filename: 'style.css',

disable: false,

allChunks: true

})],

// ...

};

```

### Webpack的常见优化方式

#### 1. 利用DLLPlugin预编译资源包

在DLLPlugin中，将公共资源包从vendor包中抽离，并打包成一个dll文件。在Webapck启动时，使用DllReferencePlugin引用这个dll文件，即可实现快速编译。

#### 2. 利用HappyPack多线程编译

在Webpack打包时，大量时间消耗在编译阶段。为了提高编译速度，可以采用多线程编译的方式。其中一个插件就是HappyPack，可以让Webapck在多线程来执行Loader和插件。

#### 3. 合理使用webpack-dev-middleware和webpack-hot-middleware

Webpack-dev-middleware和webpack-hot-middleware可以实现项目的热更新，能够让程序员更改代码后立即在浏览器中看到变化。

### Webpack的配合实例

以下是一个完整的Webpack配置文件，它实现了以下功能：

- 编译ES6

- 编译Less

- 压缩JS代码

- 分离CSS文件

- 分离 vendor 数组到 vendor 文件中

- 支持懒加载

- 自动添加 CSS3 前缀

- 编译时输出编译进度

``` javascript

const path = require('path');

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

const ExtractTextPlugin = require('extract-text-webpack-plugin');

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

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const webpack = require('webpack');

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

const autoprefixer = require('autoprefixer');

module.exports = {

entry: {

main: './src/main.js',

vendor: [

'react',

'react-dom',

'react-redux',

'react-router',

'react-router-dom',

'redux',

'redux-logger',

'redux-thunk'

]

},

output: {

path: path.resolve(__dirname, 'dist'),

filename: '[name].[chunkhash].js',

chunkFilename: '[name].[chunkhash].js'

},

module: {

rules: [

{

test: /\.js$/,

loader: 'happypack/loader',

exclude: /node_modules/

},

{

test: /\.less$/,

use: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: ['css-loader', 'postcss-loader', 'less-loader']

})

},

{

test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

loader: 'url-loader',

options: {

limit: 10000

}

}

]

},

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: 'vendor'

}),

new UglifyJsPlugin({

uglifyOptions: {

output: { comments: false },

warnings: false

}

}),

new ExtractTextPlugin({

filename: 'style.[contenthash].css',

disable: false,

allChunks: true

}),

new HtmlWebpackPlugin({

template: path.join(__dirname, 'public/index.html'),

inject: true

}),

new CleanWebpackPlugin(['dist']),

new ProgressBarPlugin(),

new webpack.LoaderOptionsPlugin({

options: {

postcss: [

autoprefixer(),

require('postcss-plugin-px2rem')({

rootValue: 100,

selectorBlackList: ['global'],

mediaQuery: false

})

]

}

})

],

resolve: {

extensions: ['.js']

},

devServer: {

contentBase: path.join(__dirname, 'public'),

compress: true,

port: 9000

}

};

```

### 结论

在Webpack中，配置项非常丰富，需要灵活使用才能更好的提高开发效率。同时对于特定的工程，需要结合实际情况进行优化。当然，在这个过程中，也需要不断的学习和实践，才能用好Webpack这个强大的工具。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/