前言

安装webpack之前，新建一个目录，再进入项目根目录执行 npm init 来初始化最简单的采用了模块化开发的项目。

安装webpack到本项目

  1. // npm i -D 是 npm install --save-dev简写
  2. // 是指安装模块并保存到package.json的devDependencies
  4. // 安装最新稳定版
  5. npm i -D webpack

安装webpack到全局

  1. npm i -g webpack

使用webpack

项目基本结构如下：
企业微信截图_16466323664911.png
主要来看看webpack的简单配置

  1. const path = require('path');
  2. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  4. module.exports = {
  5.   entry: './main.js',
  6.   mode: "development",
  7.   output: {
  8.     filename: 'bundle.js',
  9.     path: path.resolve(__dirname, './dist')
  10.   },
  11.   plugins: [
  12.     new BundleAnalyzerPlugin()  // 这块是我额外使用的打包分析插件
  13.   ]
  14. }

有个小点需要注意下：假如我们只是安装webpack到本项目下，在项目目录下执行webpack命令，会报如下错误：
企业微信截图_16466326824487.png
出现这个错误的原因是：webpack是局部安装的，并没有加入到系统环境变量中，所以控制台找不到webpack命令。
解决方法：在项目根目录下的package.json文件中，配置scripts选项。

"scripts": {
  "build": "webpack",
},

然后通过npm命令运行webpack即可。

关于webpack-bundle-analyzer插件

简介

webpack-bundle-analyzer是一个打包分析工具，可直观看到打包后各模块的大小。

安装

npm install webpack-bundle-analyzer --save-dev

使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

image.png