【webpack】学习记录（二）

时间 2019-11-13

标签 webpack 学习记录繁體版

原文原文链接

[TOC]javascript

上一章讲了webpack的基本用法，其中包括，安装、初始化、简单的demo，那这章来介绍一下进阶的内容css

公共打包（CommonsChunkPlugin）
HTML打包（html-webpack-plugin）
类库引用（Jquery）
脚本压缩（UglifyJsPlugin）

CommonsChunkPlugin

该插件能够把须要公共的脚本打包成一个脚本，如我有两个脚本，同时引用tools.js，会把公共的部分集成出来html

安装

无需安装java

目录结构

src
content.js
main.js
tools.js
index.js
index.html
webpack.config.js

##脚本jquery

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.jswebpack

//采用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便可web

<!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下的，可能和上面有点差异 npm

###结果数组

HtmlWebpackPlugin

是用于打包成html的一个插件app

参数说明

安装

|命令|说明| |-|| |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");
    });
});

【webpack】学习记录 （二）

CommonsChunkPlugin

安装

目录结构

tools.js

content.js

main.js

index.js

HtmlWebpackPlugin

参数说明

安装

脚本

webpack.config.js

template.html

partial.html

index.js

结果

【webpack】学习记录（二）