webpack-01,概念,作用,配置,打包HTML

最新推荐文章于 2024-10-11 17:39:47 发布

我叫张永宽@

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量81

点赞数

分类专栏： webpack 文章标签： javascript node.js webpack html5

本文链接：https://blog.csdn.net/weixin_44051639/article/details/120450415

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack基本概念和作用

基本概念
- 除了合并代码,还可以翻译和压缩代码
  - less/sass -> css
  - ES6/7/8 --> ES5
  - html/css/js --> 压缩合并
- 现代JavaScript应用程序的静态模块打包器
  - 静态: 文件资源(css,html,js)
  - 模块: node环境,引入文件,遵守模块化语法
- 作用
  - 静态模块打包器
  - 能翻译和压缩代码
  - 减少代码包体积,让浏览器更快速的打开网页
webpack使用步骤-webpack相关配置
- 使用前准备
  - webpack依赖node环境
  - npm或yarn等模块管理工具
  - 项目文件夹和包环境
    - 创建文件夹
    - npm init --y 初始化包环境 (得到一个package.json文件)
  - 下载webpack并配置命令
    - 特别注意: 下载的webpack包的版本号不一致会造成代码莫名错误
    - 作者安装的webpack包版本号为
    - yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
    - 在得到的package.json文件中,配置scripts(自定义命令)
    - scripts: { "build": "webpack" }
webpack-配置修改
- webpack的默认入口和出口
  - 修改webpack的配置文件名为webpack.config.js,需要自己写入,和package.json同级
  - 默认入口:src/index.js
  - 默认出口:dist/main.js
  - 本案例中为对默认出口和入口进行修改,使用默认入口出口
  - 案例目录(yarn.lock为vscode的插件,不用在意)

webpack基础使用

本案例演示自动打包html

案例1 打包html文件

创建文件index.html
代码为

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li>我是第1个li</li>
                <li>我是第2个li</li>
                <li>我是第3个li</li>
                <li>我是第4个li</li>
                <li>我是第5个li</li>
                <li>我是第6个li</li>
                <li>我是第7个li</li>
                <li>我是第8个li</li>
                <li>我是第9个li</li>
            </ul>
        </div>
    </body>
</html>

下载打包的html安装包yarn add html-webpack-plugin@5.3.1 -D

webpack.config.js进行修改配置,配置代码为

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html',
        }),
    ],
}