值得一学的webpack4-优快云博客

本文围绕Webpack展开，介绍其是管理复杂项目的工具，能实现Tree shaking、懒加载等功能，还提及在项目内安装Webpack的方法，包括不同版本安装及打包操作。同时阐述了Webpack核心概念，如loader，最后涉及实战配置案例和底层原理分析。

初识webpack

webpack是帮助我们管理复杂项目的工具。

学习webpack会极大扩充前端开发视野。

webpack可以实现：

Tree shaking

懒加载

代码分割

webpack4速度更快，大型项目甚至可以节约90%构建时间。

内置了更多的默认配置，变更了许多API。

Loader

HMR

Create React App

Caching

Plugin

SourceMap

Vue cli 3.0

Shimming

WebpackDevServer

TreeShaking

CodeSplitting

babel

React

Library

Eslint

PWA

Vue

Mode

性能优化

多页应用

原理

PreLoading

PreFetching

环境变量

TypeScript

在项目内安装webpack

npm init -y：自动生成默认配置项package.json，不用一步一步选择

不推荐在全局安装，因为可能出现两个项目用的webpack版本不一样的情况

安装：npm install webpack webpack-cli -D(或者 --save-dev)

查看版本号：npx webpack -v :npx会帮你在当前项目的node_modules里找webpack

查看webpack所有历史版本：npm info webpack

指定版本号安装：npm install webpack@4.25.1 webpack-cli -D

打包项目：npx webpack index.js

如果后续创建了webpack.config.js配置文件之后，就可以直接运行npx webpack了。

在当前项目目录下创建：webpack.config.js：配置文件

用commonJS语法，module.exports导出，

下面的entry是简写，实际上是：

entry: {

main: './index.js'

}
// 引入node的核心模块
const path = require('path')
module.exports = {
    // 入口文件，从index.js打包
    entry: './index.js',
    // 打包生成的文件放到dist文件夹下，__dirname是webpack.config.js所在的当前目录路径
    output: {
        // filename指定生成的文件名
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    }
}
// 使用npx webpack --config config1.js可以修改默认关联的配置文件由webpack.config.js变成config1.js，以config1.js为配置文件进行打包
// 在package.json中可以修改"script"标签后的配置，比如"bundle":"webpack"，这样在命令行输入npm run bundle也可以将项目进行打包
打包输出的内容：

npm run bundle之后，终端命令行里会显示几行信息表示打包成功，Chunks是打包的id，Chunk Names就是entry下面的main。

如果没有设置mode: 'production'，命令行会提示警告，在entry之前加上mode的配置就不会再提示警告了，如果不想打包出来的文件压缩，可以把'production'改成'development'。'production'是默认压缩打包之后的文件的。