【webpack】学习记录（二）

来源：互联网发布：2015中国经济数据公布编辑：程序博客网时间：2024/05/29 19:19

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 页面图标地址 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");    });});

结果

title
“`

0 0

【webpack】学习记录 （二）

CommonsChunkPlugin

安装

目录结构

脚本

tools.js

content.js

main.js

index.js

webpack.config.js

index.html(测试html)

命令

结果

HtmlWebpackPlugin

参数说明

安装

webpack.config.js

template.html

partial.html

index.js

结果

【webpack】学习记录（二）