Webpack飞行手册 - SimonMa(2)_H5之家 - 中国HTML5教程资源分享第一站

%= name %></div> <% for(let i = 0; i < Array.length;++i) { %> <%= Array[i] %> <% } %> </div>

//入口文件 import tpl from "./layer.ejs"; document.body.innerHTML = tpl({ name:"Simon", arr:["Apple","Xiaomi"] });

运行生成后的页面，便会发现 ejs 组件已经被加进去了，
想象一下，我们在平时工作中是否可以把一个轮播图，或者排行榜、评论当成一个组件呢？

插件

plugins

在日常工作中，我们使用 Loader 处理不同类型的文件，当有某种其他方面的需求时，比如抽离 CSS 、生成多页面 HTML ，plugins 便派上了用场。

插件的使用，一般都要先 require 出来，然后在 plugins 属性中进行初始化

const htmlWebpackPlugin = require("html-webpack-plugin"); ...... plugins: [ new htmlWebpackPlugin({/* options */}) ]

下面将介绍一些工作中常用的插件

clean-webpack-plugin

主要用于打包之前先清空打包目录下的文件，防止文件混乱。

npm install --save-dev clean-webpack-plugin

html-webpack-plugin

主要用于生成HTML，可以规定模板HTML，也可以为模板传入参数，压缩文件等

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

这个插件可谓是前端必备的，它的配置有很多
```jsx

new htmlWebpackPlugin({
//打包后的文件名
filename: "index.html",

//模板
template: "index.html",

//为true自动生成script标签添加到html中
//或者写 body/head 标签名
inject: false,//js的注入标签

//通过<%= htmlWebpackPlugin.options.title %>引用
title: "参数title",

//通过<%= htmlWebpackPlugin.options.date %> 引用
date: new Date()

//网站的图标
favicon: 'path/to/yourfile.ico'

//生成此次打包的hash
//如果文件名中有哈希，便代表有合理的缓冲
hash: true,

//排除的块
excludeChunks: [''],

//选中的块与入口文件相关
chunks: ['app','people'],

//压缩
minify:{
removeComments: true,collapseWhitespace: true,
minifyJS: true, minifyCSS: true,minifyURLs: true,
}

}),
那么问题来了，我们在模板文件中又该怎样使用参数呢？直接按照 ejs 的语法写入 html 文件即可！html

<%= htmlWeb
packPlugin.options.date %>

```

生成后的模板文件

Thu Dec 07 2017 10:01:58 GMT+0800 (中国标准时间) </html>

另外，如果想生成多页面应用，只需将上面的配置，多复制几遍即可。

new htmlWebpackPlugin({ filename: "index1.html", } new htmlWebpackPlugin({ filename: "index2.html", } new htmlWebpackPlugin({ filename: "index3.html", }

UglifyJsPlugin

主要用于压缩 Javascript 文件

npm i -D uglifyjs-webpack-plugin

webpack.ProvidePlugin

自动加载模块，全局使用变量，下面借助官网的DEMO

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) // in a module $('#item'); // <= 起作用 jQuery('#item'); // <= 起作用 // $ 自动被设置为 "jquery" 输出的内容

open-browser-webpack-plugin

打开服务器后会自动打开浏览器端口，用起来很方便

HotModuleReplacementPlugin

热更新插件

常用命令

webpack

最基本的启动webpack命令

webpack -w

监控代码变化，实时进行打包更新

webpack -p

对打包后的文件进行压缩，利用线上发布

webpack -d

提供SourceMaps，方便调试代码

webpack --colors

输出结果带彩色，可以更详细的查看信息

webpack --profile

输出性能数据，可以看到每一步的耗时

devtool

不知道你现在时候有没有一个想法？ webpack 打包后的文件就一定正确无误吗？如果发生错误的话，该怎么办呢？

devtool 属性便提供了生成 sourcemap 的功能，具体有下面这些选项。

source-map

此选项具有最完备的source map，但会减慢打包的速度；

cheap-module-source-map

生成一个不带列映射的map

eval-source-map

使用eval打包源文件模块，生成一个完整的source map。

cheap-module-eval-source-map

这是最快生成source map的方法，生成后的Source Map 会和打包后的 JavaScript 文件同行显示，但没有列映射，所以慎用

devServer

contentBase: "./dist",

本地服务器所加载的页面所在的目录

historyApiFallback: true,

再找不到文件的时候默认指向index.html

inline: true,

当源文件改变时会自动刷新页面

hot: true,

热加载开启

port:8080

设置默认监听端口

resolve

extensions: [".js", ".html", ".css", ".txt","less","ejs","json"],

自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名

alias: { Temp: path.resolve(__dirname, "src/templates/") }

模块别名定义，直接 require('AppStore') 即可,方便后续直接引用别名

其他功能 path

常用于字符串拼接路径。

const path = require("path");

有两个 API

path.resolve()

将相对路径转换成绝对路径

const aPath = path.resolve("__dirname","js","main.js"); // aPath = 当前目录下的 js 文件夹的 main.js 文件的路径

path.join()

对路径进行拼接

const rPath = path.join("source","js","main.js"); // aPath = //source/js/main.js

__dirname
Node.js 中的全局变量，代表的是项目的当前路径。常与 path 结合使用。

热更新

上面我们已经提过了 webpack -w 命令，它可以实时的监控代码的改变，从而自动进行打包，但是有个缺点在于它不能及时的刷新界面。