Webpack 打包 - 3.webpack Html 资源打包

2022-08-16 17:31:44 阅读：128 来源： 互联网

标签：index src webpack html js Webpack Html 文件打包

1.文件结构

2.安装 webpack、webpack-cli

$ npm init
$ npm i webpack@4.41.6  webpack-cli@3.3.11  -g   //(全局)
$ npm i webpack@4.41.6  webpack-cli@3.3.11  -D   //(开发环境)

2.1 安装 html-webpack-plugin

$ npm i html-webpack-plugin@3.2.0 -D

3.新建 src 文件夹

　　src 文件夹下新建入口文件 index.js 文件

　　src 文件夹下新建 index.html 文件

3.1 新建 webpack.config.js 文件

index.js

function add(x,y) {
    return x+y
}

console.log(add(2,3));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

webpack.config.js

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
  插件需要引入后再使用
*/
const {resolve} = require('path')
// HtmlWebpackPlugins 是一个构造函数
const HtmlWebpackPlugins = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: "built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: []
    },
    plugins: [
        //plugins 的配置
        // html-webpack-plugin
        //功能: 默认创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
        new HtmlWebpackPlugins({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

这里主要是使用 HtmlWebpackPlugins 处理 html 文件

4.打包

$ webpack

build 文件夹下回生成两个文件

预览

end~

标签：index,src,webpack,html,js,Webpack,Html,文件,打包
来源： https://www.cnblogs.com/sener/p/16592218.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。