webpack包管理工具

最新推荐文章于 2023-04-12 21:35:08 发布

原创最新推荐文章于 2023-04-12 21:35:08 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文介绍Webpack这一流行的前端构建工具，涵盖其基本使用方法、配置过程及常见功能如代码压缩混淆、处理JS兼容问题等。详细步骤包括创建项目、配置打包入口与出口、实现自动打包和预览页面生成。

1.webpack概述

webpack是一个流行的前端项目构建工具（打包工具），可解决当前web开发中所面临的困境。

webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能。

2.webpack的基本使用

（1）创建项目的过程

创建列表隔行变色项目

（2）在项目中安装和配置webpack

develpment是对代码不进行压缩，比压缩代码production转换时间短。开发阶段尽量将mode设置为development，上线的时候指定为production。

（3）配置打包的入口与出口

如果要修改webpack配置打包的入口与出口,要在webpack.config.js文件中的配置信息新增以下内容：

const path = require('path')

module.export = {
    mode: 'development',
    // 上线时要将development改为production
    entry: path.join(__dirname,'./src/index.js'),//输入文件存放路径
    output: {
        path: path.join(__dirname,'./dist/'),//输出文件存放路径
        filename: 'bundle.js'//输出文件的名称
    }
}

（4）配置webpack的自动打包功能

一按保存就会自动打包

（5）配置html-webpack-plugin生成预览页面

配置生成预览页面

webpack.config.js：

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
    template:'./src/index.html',
    filename:'index.html'
})

module.exports = {
    mode: 'development',
    // 上线时要将development改为production
    entry: path.join(__dirname,'./src/index.js'),//输入文件存放路径
    output: {
        path: path.join(__dirname,'./dist/'),//输出文件存放路径
        filename: 'bundle.js'//输出文件的名称
    },
    plugins:[htmlPlugin]
}

（6）配置自动打包相关的参数