webpack温故而知新

webpack用的人很多，同样吐槽的人也很多。一边垃圾垃圾的骂着，一边又不得不去翻阅文档。为什么呢？好好的靠src的年代一去不复返了，随随便便写个代码就是一堆的node_modules。

第一章：webpack与构建发展简史

1. npm init -y（-y默认确实状态）
2. npm install webpack-cli webpack --save-dev
3. ./node_modules/.bin/webpack -v （看看打印的版本号）4.44.2
4. 打包配置文件 webpack.config.js

'use stric';
const path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'production'
};

5. 编写src/index.js 等文件
6. 编译 ./node_modules/.bin/webpack ，运行该命令可以使用默认的配置打包
7. npm run build

第二章：webpack基础用法

entry

单入口：

entry:'./path/to/my/entry/file.js'

多入口：

entry:{
	app:"./src/app.js",
	admin:"./scr/admin.js"
}

output

单入口：

output:{
    path:__dirname + '/dist',
    filename:'bundle.js'
}

多入口：通过占位符确保文件名的唯一

entry:{
	app:"./src/app.js",
	admin:"./scr/admin.js"
},
output:{
    path:__dirname + '/dist',
    filename:'[name].js'
}

Loaders

module: {
    rules: [
        {
            test: /\.tsx?$/, //指定匹配规则
            use: 'ts-loader', //指定使用的loader名称
            exclude: /node_modules/ //排除的文件
        }
    ]
},

Plugins

插件用于bundle文件的优化，资源管理和环境变量注入。作用于整个构建过程。

plugins: [
        new HTMLWebpackPlugin({
            template: 'src/temples/index.html',
            filename: 'index.html',
            chunks: ['index'],
            inject: 'body'
        }),
]

Mode

Mode用来指定当前的构建环境是：produnction,development 还是none。设置mode可以使用webpage内置的函数，默认值为production。

解析ES6

使用babel-loader，配置文件.balerrc

解析css、Less和Sass

解析图片和字体

第三章：webpack进阶用法

第四章：编写可维护的webpack构建配置

第五章：webpack构建速度和体积优化策略

第六章：通过源代码掌握webpack打包原理

第七章：编写loader和插件

第八章：React全家桶和webpack开发商城项目

命令行中用：code .可以直接打开vscode，后面的空格和点就是当前文件夹。
在文件夹中按shift键，然后鼠标右键，这个时候右键菜单会多个“在此处打开XXX”，比cd 快多了。