【Webpack基础】plugins的概念_html-js-css

目录 1. plugins1.1 html-webpack-plugin1.1.1 基本使用1.1.2 配置 html 模板 1.2 clean-webpack-plugin1.2.1 基本使用 2. entry、output2.1 如果 output 不配置 filename，默认会取 entry 的 key 命名打包文件2.2 多个 entry 命名打包文件的方式2.3 如果 index.html 引入的 js 文件不在服务器，而在CDN

1. plugins

是一个数组，以实例化的方式配置插件

1.1 html-webpack-plugin

每次打包都需要手动创建html，比较麻烦

html-webpack-plugin 可以帮你自动生成 html 文件

1.1.1 基本使用

安装

yarn add html-webpack-plugin@3.2.0 -D

配置

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	...
    plugins: [
        new HtmlWebpackPlugin()
    ],
    ...
}

打包后自动帮你生成 html 文件，并帮你引入打包生成的 js 文件

此时只是帮你创建了 html 文件，具体结构还得自己写

1.1.2 配置 html 模板定义模板

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页title>
head>

<body>
    <div id="app">div>
body>

html>

引入模板

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	...
	plugins: [
	    new HtmlWebpackPlugin({
	        template: './src/index.html' // 引入模板
	    })
	],
    ...
}

打包后

1.2 clean-webpack-plugin

每次打包之前清理打包生成的JS文件，避免堆积

1.2.1 基本使用

安装

yarn add clean-webpack-plugin -D

配置

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 注意：clean-webpack-plugin是对象属性，所以需要解构出来
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	...
    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlWebpackPlugin() // 实例化
    ],
    ...
}

2. entry、output 2.1 如果 output 不配置 filename，默认会取 entry 的 key 命名打包文件

module.exports = {
    ...
    // 字符串是简写，原本是对象
    // entry: './src/index.js',
    entry: {
        test: './src/index.js'
    },
	...
    output: {
        // filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

验证

2.2 多个 entry 命名打包文件的方式

方式一：默认命名

module.exports = {
    ...
    entry: {
        mian: './src/index.js',
        sub: './src/index.js'
    },
	...
    output: {
        // filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

打包后

方式二：占位符语法

module.exports = {
    ...
    entry: {
        mian: './src/index.js',
        sub: './src/index.js'
    },
	...
    output: {
        filename: 'bundle.js', // 此时打包会报错，因为命名相同引起了冲突
        path: path.resolve(__dirname, 'dist')
    }
}

解决 -> 占位符语法 [...]

module.exports = {
    ...
    entry: {
        mian: './src/index.js',
        sub: './src/index.js'
    },
	...
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

打包

2.3 如果 index.html 引入的 js 文件不在服务器，而在CDN

那么引入的就不是相对路径，而是CDN网址

<script type="text/javascript" src="main.js">script>

<script type="text/javascript" src="http://cdn.com.cn/main.js">script>

通过 output 的 publicPath 属性可以配置：

module.exports = {
    ...
    entry: {
        mian: './src/index.js',
        sub: './src/index.js'
    },
	...
    output: {
    	publicPath: 'http://cdn.com.cn/',
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

此时打包就自动生成了CDN地址

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1324732.html

【Webpack基础】plugins的概念

发表评论

评论列表（0条）