webpack入门，让你不在难(二)

ゝ一世哀愁。 2023-06-27 12:39 3阅读 0赞

![format_png][]

引言

继上一篇《webpack入门，让你不在难》，简单的讲解了webpack是什么、安装与配置，有了上篇的基础，小编现在继续以示例的方式来理解webpack中常用的加载器与插件。

其中加载器主要是：

JS\[X\]的加载

CSS的加载

HTML文件加载

图片加载

Less的加载

此次demo未使用示例讲解图片加载和less加载，可以参考看阮一峰大神提供的demo：https://github.com/ruanyf/webpack-demos\#demo01-entry-file-source

其中插件主要讲解：

webpack.optimize.UglifyJsPlugin

html-webpack-plugin

open-brower-webpack-plugin

DEMO目录结构

![format_png 1][]

** package.json文件：**

"name": "webpack-xmind",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": \{

"test": "echo \\"Error: no test specified\\" && exit 1",

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons",

"start": "webpack-dev-server --inline --hot"

\},

"author": "",

"license": "ISC",

"devDependencies": \{

"babel-core": "^6.24.1",

"babel-loader": "^7.0.0",

"babel-preset-latest": "^6.24.1",

"css-loader": "^0.28.1",

"html-loader": "^0.4.5",

"html-webpack-plugin": "^2.28.0",

"open-browser-webpack-plugin": "0.0.5",

"style-loader": "^0.17.0",

"webpack": "^2.5.0",

"webpack-dev-server": "^2.4.5"

**webpack.config.js文件：**

var path = require('path');

var webpack = require('webpack');

var htmlWebpackPlugin = require('html-webpack-plugin');

var OpenBrowerPlugin = require('open-browser-webpack-plugin');

module.exports = \{

devtool: 'eval-source-map',

entry: './src/app.js',

output: \{

path: path.resolve(\_\_dirname, './dist'),

filename: 'js/\[name\].bundle.js'

\},

module: \{

loaders: \[

test: /\\.js$/,

loader: 'babel-loader',

query: \{

presets: \['latest'\]

\}, \{

test: /\\.css$/,

loader: 'style-loader!css-loader'

\}, \{

test: /\\.html$/,

loader: 'html-loader'

\},

plugins: \[

new webpack.optimize.UglifyJsPlugin(\{

compress: \{

// 不显示警告

warnings: false

\}),

new htmlWebpackPlugin(\{

title: "This page is generated by template",

filename: 'index.html',

inject: 'body'

\}),

new OpenBrowerPlugin(\{

url: 'http://localhost:8080'

\})

其他原文件的内容，会在后面加载器示例与插件示例中提及部分，完整的demo源代码请通过文章后面会提供文件下载地址进行下载。

加载器示例

1.JS\[X\]的加载

1)在webpack.config.js文件中添加：

test: /\\.js$/,

loader: 'babel-loader',

query: \{

presets: \['latest'\]

2)安装babel对应的文件

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

3) 运行 npm run start

对应文件源代码：

babelloader.js

function getObj() \{

return \{

hobby: 'swimming'

export default getObj;

app.js:

import Obj from './components/js/babelloader.js';

// 初始化定义变量

var variableName = 'hello webpack!';

var obj = new Obj();

var importVariableName = obj.name + " " + obj.hobby;

// 获取index.html文件中ID为app的DIV

var divVariableName = document.getElementById("app");

divVariableName.innerHTML = variableName + importVariableName;

2.CSS的加载

1)在webpack.config.js文件中添加：

test: /\\.css$/,

loader: 'style-loader!css-loader'

2)安装babel对应的文件

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

3) 运行 npm run start

对应文件源代码：

common.css:

html, body \{

padding: 0;

margin: 0;

background-color: red;

app.js:

import './css/common.css';

import Obj from './components/js/babelloader.js';

// 初始化定义变量

var variableName = 'hello webpack!';

var obj = new Obj();

var importVariableName = obj.name + " " + obj.hobby;

// 获取index.html文件中ID为app的DIV

var divVariableName = document.getElementById("app");

divVariableName.innerHTML = variableName + importVariableName;

3..HTML文件加载

1)在webpack.config.js文件中添加：

test: /\\.html$/,

loader: 'html-loader'

2)安装babel对应的文件

npm install html-loader --save-dev

3) 运行 npm run start

对应文件源代码：

layer.html:

<div>this is a layer</div>

</div>

layer.js:

import tpl from './layer.html';

function layer() \{

return \{

tpl: tpl

\};

export default layer;

app.js:

import './css/common.css';

import Obj from './components/js/babelloader.js';

import Layer from './components/layer/layer.js';

// 初始化定义变量

var variableName = 'hello webpack!';

var obj = new Obj();

var importVariableName = obj.name + " " + obj.hobby;

// 获取index.html文件中ID为app的DIV

var divVariableName = document.getElementById("app");

divVariableName.innerHTML = variableName + importVariableName;

var layer = new Layer();

var layerDivVarName = document.getElementById("layer");

layerDivVarName.innerHTML = layer.tpl;

插件示例

1.webpack.optimize.UglifyJsPlugin

1)在webpack.config.js文件中添加：

new webpack.optimize.UglifyJsPlugin(\{

compress: \{

// 不显示警告

warnings: false

\}),

2) 运行 npm run start

使用插件后效果：

2.html-webpack-plugin

1)在webpack.config.js文件中添加：

new htmlWebpackPlugin(\{

title: "This page is generated by template",

filename: 'index.html',

inject: 'body'

\})

2)安装插件

npm install html-webpack-plugin --save-dev

3) 运行 npm run start

使用插件后效果：

3..open-browser-webpack-plugin

1)在webpack.config.js文件中添加：

new OpenBrowerPlugin(\{

url: 'http://localhost:8080'

\})

2)安装插件

npm install open-browser-webpack-plugin --save-dev

3) 运行 npm run start

执行后，直接跳转浏览器指定的url：http://localhost:8080/打开页面，效果图，可以下载源码后，进入webpack-xmind2文件夹，使用npm run start命令查看。

DEMO示例

针对上面的加载器与插件的安装配置，最终的效果图如下

![format_png 2][]

对应的思维导图和代码下载

导图：

![format_png 3][]

可能效果不是很好，大家可以在这里下载：

思维导图：https://pan.baidu.com/s/1miv7x8W

操作代码：https://pan.baidu.com/s/1hs86Npa

代码下载后，直接进入到webpack-xmind2文件夹，使用npm run start命令后，直接跳转浏览器预览效果。

如果您认为此篇文章不错，请推广，因为你们的支持和鼓励是小编继续写下去的动力。

--------------------

微信订阅号：全栈工程师成长记（qzgcsczj）

目前阶段：

以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；

未来阶段：

整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。

如有兴趣一起学习，一起进步的朋友可以关注微信公众号号，互相交流进步。

--------------------

![format_png 4][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJpYWh6cWFRekFiNkR4VmJaMnlESmp0NkVWdkp3OGlhYU5vUXVRUk1OVEFCSHc1dkNpYjBMOGRSTm96TUxSRmlhanRBTWxseDIwRTVpYTFzMXcvMA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL2IwS2J4MTd3Z1hHY2Fkd0oxdVN4VzUxbHdpYWJESld3cFJjWkhseXNST2FLd2ppYzIwaWJacTFxZnVMaElGZ1RmWnA1N0h6aWNyVVQ1bVQwY1JJc3oxRmNrQS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL2IwS2J4MTd3Z1hHY2Fkd0oxdVN4VzUxbHdpYWJESld3cGpoUHdlQXFRT0ZCT3k0TWhnY2c0RE5pYm9FcGNjcjJoRTJ1NkhnZ0Q5M0kwbWd1YTBnNmljUUF3LzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL2IwS2J4MTd3Z1hHY2Fkd0oxdVN4VzUxbHdpYWJESld3cGhOU0pRMlZ0NkxQVzZLb0ZkVmhEUG5uMmljMVVibW1JeFhoaFE3YnpuUnd2cWRVeTlVWUpVOHcvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfZ2lmL294QUhld2FMMnJqSXZ2dmFwVzVFVm0wWEMzV2xUMXg2UWdQUUJOZXczQndDalh4Qnhya1VEbHBjd09VeFB4eVVUSTZpY1RpYUhzZzVONG81emRUcFRqWVEvMA?x-oss-process=image/format,png