webpack（一）

快速搭建

webpack-cli 是Webpack的cli程序，用来在命令行中调用Webpack
npm init --yes
npm i webpack webpack-cli --save-dev

查看版本

npx webpack --version

打包

npx webpack
默认会从src/index.js作为入口
dist/main.js 作为出口

webpack.config.js 是运行在Node.js环境中，可以直接在这个文件中使用path之类的Node.js 内置模块

使用webpack内置对象Configration

image.png

webpack 工作模式

• production 模式 内置优化插件，优化打包结果，速度变慢
• development 优化打包速度，添加调试相关辅助插件
• none 原始打包，不做处理，分析模块打包结果

通过CLI --mode参数传入或设置mode属性

例子

webpack.config.js

// import { Configuration } from "webpack";
const path = require("path");

// /**
//  * @type {Configuration}
//  */
module.exports = {
  mode: "none",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
};