上一章讲了webpack的基本用法,其中包括,安装、初始化、简单的demo,那这章来介绍一下进阶的内容
- 公共打包(CommonsChunkPlugin)
- HTML打包(html-webpack-plugin)
- 类库引用(Jquery)
- 脚本压缩(UglifyJsPlugin)
CommonsChunkPlugin
该插件可以把需要公共的脚本打包成一个脚本,如我有两个脚本,同时引用tools.js,会把公共的部分集成出来
安装
无需安装
目录结构
- src
- content.js
- main.js
- tools.js
- index.js
- index.html
- webpack.config.js
脚本
tools.js
module.exports = {
writeContent: function (str) {
document.write("tools write:" + str);
}
}
content.js
var tools = require("./tools");
tools.writeContent("<h3>I am the content page</h3>");
main.js
var tools = require("./tools");
tools.writeContent("<h2>I am the main page</h2>");
index.js
require("./main")
require("./content")
webpack.config.js
//采用path插件
var path = require('path');
var webpack = require('webpack');
//合并脚本配置
var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
//生成公共信息
name: 'commons',
filename: "commons.js",
chunks: ["demo_index", "demo_main", "demo_content"],
});
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'demo/dist');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: {
demo_index: ['./demo/index'],
demo_main: ['./demo/main'],
demo_content: ['./demo/content'],
},
//输出的文件名 合并以后的js会命名为bundle.js后缀
output: {
//demo/dist 生成在该目录下
path: BUILD_PATH,
filename: '[name]-bundle.js'
},
//添加我们的插件 会自动生成一个html文件
plugins: [
commonsChunkPlugin
]
};
index.html(测试html)
只要导入commons.js以及index_demo-budle.js即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript" charset="utf-8" src="dist/commons.js">
</script>
<script type="text/javascript" charset="utf-8" src="dist/demo_index-bundle.js">
</script>
</body>
</html>
命令
在项目根目录输入webpack,我是在src下的,可能和上面有点差别
结果
HtmlWebpackPlugin
是用于打包成html的一个插件
参数说明
参数名 | 备注 |
---|---|
title | 生成页面标题 |
filename | 生成文件名字,默认assets/admin.html |
template | 模板路径 |
favicon | 页面图标地址 |
hash | css是否进行hsash值存储,默认true |
chunks | 对哪些块进行加入,默认全部entry,数组 |
excludeChunks | 移除哪些块 |
安装
命令 | 说明 |
---|---|
npm install html-loader –save-dev | html加载器 |
npm install extract-text-webpack-plugin –save-dev | 文本加载器 |
npm install underscore-template-loader –save-dev | 模板导入加载器 |
npm install lodash –save-dev | 依赖脚本 |
## 脚本
webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'src/app/dist');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: {
demo_index: ['./src/demo/index']
},
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: '[name]-bundle.js'
},
//添加我们的插件 会自动生成一个html文件
plugins: [
new HtmlWebpackPlugin({
title: 'Hello HTML app',
filename: 'main.html',
template: './src/demo/template.html',
chunks: ["demo_index"]
}),
new ExtractTextPlugin('styles.css')
],
module: {
loaders: [
{
//可以在页面中使用加载
test: /\.html$/, loader: "underscore-template-loader"
}
]
},
};
template.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>hello template</h2>
<button id="ID_btn">我是按钮</button>
@require('partial.html')
</body>
</html>
partial.html
<h1>partial.html</h1>
index.js
define("index", ["./student", "../lib/jquery/jquery", "./main", "./content"], function (s, $) {
$("#ID_btn").click(function() {
s.alert("test btn");
});
});
结果
“`