0
点赞
收藏
分享

微信扫一扫

HTML 实现 点击按钮切换 整张界面 && 点击按钮切换局部界面

海滨公园 2023-10-21 阅读 45

1、简单介绍

默认功能

可处理 js、json文件,处理 js 文件引入将其打包;
将es6的import规范编译为浏览器可识别的commonjs规范
生产环境比开发环境打包多了代码丑化、压缩;

五大核心

入口(entry):指定打包入口;
出口(output):指定打包输出文件目录、文件名;
转换器(loader):用于对模块的源代码进行转换,如处理样式、图片等静态资源;
插件(plugins):用于执行范围更广的任务,如打包优化,资源管理,注入环境变量;
模式(mode):默认值为 production,启用 webpack 内置在相应环境下的优化;

2、安装

  • “webpack”: “^5.89.0”
  • “webpack-cli”: “^5.1.4”
npm i webpack webpack-cli -D

3、配置介绍

执行方式一:简单更改webpack配置

  • npm script脚本
"scripts": {
  "dev": "webpack ./src/main.js --mode=development",
  "build": "webpack ./src/main.js --mode=production",
},
  • 直接命令行
npx webpack ./src/main.js --mode=development
npx webpack ./src/main.js --mode=production
# 创建配置文件
npx webpack init

执行方式二:创建webpack.config.js添加自定义配置

  • 项目根目录创建配置文件
// webpack5 基本配置
module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: 'development',
}

  • 直接执行webpack,自动使用该文件配置
npx webpack

后续更新常用webpack配置!

举报

相关推荐

0 条评论