您的位置：首页 > Web前端 > Webpack

【webpack】学习记录 （二）

2016-09-19 19:50 676 查看
CommonsChunkPlugin
安装

目录结构

脚本
toolsjs

contentjs

mainjs

indexjs

webpackconfigjs

indexhtml测试html

命令

结果

HtmlWebpackPlugin
参数说明

安装
webpackconfigjs

templatehtml

partialhtml

indexjs

结果

上一章讲了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页面图标地址
hashcss是否进行hsash值存储，默认true
chunks对哪些块进行加入，默认全部entry，数组
excludeChunks移除哪些块

安装

命令说明
npm install html-loader –save-devhtml加载器
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");
});
});


结果



“`
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航