【webpack】学习记录（二）

最新推荐文章于 2020-05-21 15:50:18 发布

悟空_

最新推荐文章于 2020-05-21 15:50:18 发布

阅读量1k

点赞数

分类专栏：前端文章标签： webpack 脚本打包页面自动生成前端优化

本文链接：https://blog.csdn.net/u010475041/article/details/52588721

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上一章讲了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");
    });
});