【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");
    });
});