项目初始化

  1. 新建一个目录：my-webpack-demo
  2. 进入项目目录yarn init
  3. 在项目文件新建一个src/index.js 随便写点代码

image.png

  1. 安装webpack,webpack-cli

package.json devDependencies:
image.png
现在的项目看起来是：
image.png
命令行运行：$npx webapcke
image.png
报错了，mode选项没有设置，是环境变量的问题，但是dist还是打包出来了。
image.png
他直接省略了变量的声明了，非常的简洁。

解决mode报错

新建一个文件webpack.config.js
image.png
再重新运行 $npx webpack
image.png
ok, 没有警告了，dist文件的输出也是没有问题的。

让webpack输出的代码支持IE

只要加一个文件就可以了：
.browserslistrc

  1. [production]            // 环境，在production环境下
  2. > 1%                            // 要支持全世界大于1%的浏览器
  3. ie 9                            // 至少要支持ie 9
  5. [modern]                                    // 开发环境
  6. last 1 chrome version            // 支持最新的chrome版本
  7. last 1 firefox version    // 支持最新的firefox版本
  9. [ssr]
  10. node 12

用babel-loader打包JS

其实webpack5已经可以打包js了，但是babel-loader有更多的功能，比如说babel-loader还可以打包typescript。
安装：
$ yarn add -D babel-loader @babel/core @babel/preset-env webpack

webpack的配置最好不要自己写
所以直接看文档https://webpack.js.org/loaders/babel-loader/
文档是github就看GitHub的，其次就是webpack官方的了。
image.png
再稍微改一下，让他能顺便匹配上jsx
webpack.config.js:

  1. module.exports = {
  2.   mode:'production',
  3.   module: {
  4.     rules: [
  5.       {
  6.         test: /\.jsx?$/,
  7.         exclude: /node_modules/,  // 排除node_modules的文件，
  8.                                                             // node里面的文件实际上是打包好的，所以不需要去打包他
  9.         use: {
  10.           loader: 'babel-loader',            // 使用babel-loader
  11.           options: {
  12.             presets: ['@babel/preset-env']   //预先的规则集合 pre  sets
  13.           }
  14.         }
  15.       }
  16.     ]
  17.   }
  18. }

这样写了之后，就不是用webpack去打包js了，而是用webpack调用babel-loader去对js进行打包

运行打包：yarn build
image.png
image.png
ok~ 没有问题

用babel-loader打包JSX

使用的规则是 perset-react
https://www.babeljs.cn/docs/babel-preset-react
主要是他预设了以下的三个插件
image.png
它已经帮我们都配好了，那我们做的事情就会简单很多。
而且我们之前的已经在正则上加了匹配jsx，只需要在presets里面加上preset-react就好了
image.png
创建一个jsx文件测试一下
jsx-demo.jsx
image.png
index.js
image.png
yarn build
image.png
成功了，检查一下dist
image.png
没有问题
但是没有引入react，应该使用的时候是会出错的。
webstorm居然没有给提示，所以需要想个办法让他提示。

给webpack配置ESLint插件

新建一个文件： .eslintrc.js

  1. module.exports ={
  2.   extends: ['react-app'],   //react团队配好的eslint规则
  3.   rules:{
  4.     // 2的意思是：没有使用就报错
  5.     'react/jsx-uses-react':[2],
  6.     //提示要在JSX文件里手动引入React
  7.     'react/react-in-jsx-scope':[2]
  8.   }
  9. }

还需要在webstorm里面开启eslint
image.png
然后就有提示啦
image.png
加上就消失了
image.png
但是这是webstorm给我们的提示，我们需要给webpack给我们加上。这时就需要用到plugins
https://github.com/webpack-contrib/eslint-webpack-plugin
image.png
按照他的文档说法加就好了
image.png
image.png
然后presets里面也要加上{runtime:’classic’}
因为从17版本开始，react提供了两种使用jsx的方法，classic就是经典用法（旧的），大部分公司也是使用16.8这样的经典版本。所以这里强制指定使用经典版

现在可以build试一下了
image.png
没有问题的

用babel-loader打包TypeScript

创建ts-demo.ts文件

  1. const x:string = 'typescript'
  2. export {x}

很幸运，babel也已经帮我们弄了presset，只需要改两个地方就可以了
image.png
[jt]就是j或t都可以，再加上preset-typescript即可。

yarn build
image.png
在dist里面也是可以找到typescript的：
image.png

让ESLint支持typescript

.eslintrc.js

  1. module.exports ={
  2.   extends: ['react-app'],
  3.   rules:{
  4.     // 2的意思是：没有使用就报错
  5.     'react/jsx-uses-react':[2],
  6.     //提示要在JSX文件里手动引入React
  7.     'react/react-in-jsx-scope':[2]
  8.   },
  9.   overrides: [{
  10.     files: ['*.ts', '*.tsx'],
  11.     parserOptions: {
  12.       project: './tsconfig.json',
  13.     },
  14.     extends: ['airbnb-typescript'],
  15.     rules: {
  16.       '@typescript-eslint/object-curly-spacing': [0],
  17.       'import/prefer-default-export': [0],
  18.       'no-console': [0],
  19.       'import/extensions':[0]
  20.     }
  21.   }]
  22. }

再在webpack.config.js里面的eslint插件里面加上ts，tsx
image.png
build
image.png

用babel-loader打包TSX

新建一个tsx-demo.tsx
image.png
然后发现报错。
目前tsx并没有被ts支持，所以需要修改以下tsconfig.json
先初始化tsconfig.json文件
$ npx tsc —init
他会创建一个很多东西的tsconfig.json:
image.png
要修改一下
将image.png改成image.png
让ts知道jsx是react的，div是要变成React.createElemnt的div才可以

将image.png改成image.png
我玩不太来ts的严格模式，所以改掉，再开启一个稍微不那么严格的模式开起来。

然后就没有报错了
image.png
再引入到index文件去使用并打包测试
image.png
回车换行出问题了 本来应该是‘LF’变成了‘CRLF’
但是用webstorm帮我解决了这个问题，一直点他的提示就可以了。
vscode谷歌一下就可以了。

最后打包好在dist文件上也是可以找到tsx的demo的
image.png

让JS和TS分别支持@alias

js

在webpack config上加
image.png

ts

tsconfig加上：
image.png

让webpack支持SCSS

文档https://webpack.docschina.org/loaders/sass-loader/
抄文档就可以了
在webpack config文件里：
image.png
是从上往上看的，将sass装换成css，css再转换成CommonJS模块，最后将JS字符串生成style节点
写一个简单的scss文件用于测试
image.png
然后打包完在dist里面找
image.png
找到了 没有问题

SCSS自动import全局文件

将loader变成一个对象，并写上想要的options就可以了
image.png
后面的分号很重要，不然会报错。

JS获取SCSS的变量

这样可以很方便地帮助我们管理js和css中的样式

需要新起一个文件scss-export.scss，用来export变量出去，而不是在scss-vars里面export，否则会有bug

scss-export.scss
image.png
然后是需要改一下webpack-config
将css-loader改成
image.png
这个到处scss变量是通过css进行编译的，就可以支持export语法，也就是说，这个不是scss提供的功能，而是css提供的高级功能

js文件如何获取
image.png

让webpck支持LESS文件

很显然，跟SCSS差不多，在rules里把loader加上去就可以了
image.png

LESS自动import全局文件

跟SCSS差不多
当引入less或scss文件时，在路径上加上 ~ 符号是比较保险的。
image.png

JS获取LESS的变量

其实上面已经配好了，就是这一段
image.png
可以直接在变量文件中export
image.png
:export是webstorm不认识的伪类

让webstorm将不认识的伪类识别从报错变成警告：
image.png

太多CSS的处理了，优化一下

声明一个cssLoaders去处理，将LESS和SCSS重复的部分抽出来，将不同的地方通过参数传入cssLoaders处理。

  1. const cssLoaders = (...loaders)=>[
  2.   'style-loader',
  3.     {
  4.       loader:'css-loader',
  5.       options: {
  6.         modules: {
  7.           compileType: 'icss',
  8.         }
  9.       }
  10.     },
  11.   ...loaders
  12. ]

然后改一下各个test

  1. {
  2.   test: /\.s[ac]ss$/i,
  3.     use:cssLoaders({
  4.       loader: 'sass-loader',
  5.       options: {
  6.         additionalData:`
  7.           @import "src/scss-vars.scss";
  8.           `,
  9.         sassOptions:{
  10.           includePaths:[__dirname]
  11.         }
  12.       }
  13.     })
  14. }

其实就是将use改了，把不同的部分当做对象传入cssLoaders。

在生产环境提取单独的CSS文件

提取CSS文件，并给文件夹hash，可以方便缓存
用到的插件是MiniCssExtractPlugin
文档https://webpack.js.org/plugins/mini-css-extract-plugin/
抄文档就可以了：

  1. 安装并引入 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
  2. 把MiniCssExtractPlugin 放到plugins里面

image.png

  1. 把MiniCssExtractPlugin.loader放到cssloader前面

由于之前写了个cssLoaders，所以就替换掉style-loader（一定要放在css-loader前面）
image.png

给css文件加hash

给MiniCssExtractPlugin加上options就可以了
image.png
build之后看看效果
image.png
看到有css文件有hash了

顺便给js文件也加上hash

就用到了output了
image.png
image.png

根据mode选择cssloader

image.png
就这么简单，如果是production 就延续，如果不是 就用style-loader
生产环境就提取css打包，非生产环境就不浪费性能去搞了。
就实现了css-loader的切换了

自动生成HTML页面

用到的插件是HtmlWebpackPlugin
https://webpack.docschina.org/plugins/html-webpack-plugin/
也是跟着文档抄
image.png
引入之后在pluins里面写就可以了
image.png
build完之后就可以看到html文件了
image.png
他的内容是这样的：image.png