值得一学的webpack4

初识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'是默认压缩打包之后的文件的。

webpack核心概念

loader: webpack不能识别非js后缀结尾的模块，就需要通过loader让webpack识别出来，在配置文件中增添module配置项，使用'file-loader'(需要npm install file-loader)

webpack进阶

webpack实战配置案例

webpack底层原理及脚手架工具分析