这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」。

1.安装

yarn global add webpack webpack-cli webpack-dev-server

打包格式

创建三个文件夹mkdir config dist src,在src里面创建index.js,在dist里面创建index.html,touch dist/index.html,touch src/index.js

简易打包命令

webpack --mode=development webpack --mode=production

局限

只适用于打包js文件，但是线上环境一般要打包为js，css，html,image文件，那就需要在config中配置，请看目录下一个例子

2.webpack基本的打包流程介绍

entry(配置入口，单入口和多入口都可以)
mode（开发环境和生产环境）
output（输出路径）
devServer（配置服务器参数）

contentBase:'dist'//用于运行server的时候直接进入dist运行index.html

打包命令

webpack --config=config/webpack-dev.js webpack-dev-server --config=config/webpack-dev.js

webpack打包压缩到一行文件（注意：mode必须为prodution）

webpack --config=config/webpack.dev.js --optimize-minimize

3.loader的使用

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

loader的打包流程

安装loader
配置module对象里面rules规则
正常使用webpack命令即可

css的打包

需要style-loader,css-loader

html和image的打包

需要extract-loader,用于区别js和html分开打包，因为index.html不只是现成的dist里面的了，都需要在src里打包出来的，dist文件夹里面全是打包后的结果，因为可能有很多html文件，你不可能全部写出来，需要让loader帮忙加载，html-loader用于打包html，fileloader用于改名和打包image。

4.webpack-cli配置babel

首先创建.babelrc文件，下载所需要的babel-plugin，假如是es2015转化plugin为例子，下载所需要的pluginyarn add babel-plugin-transform-es2015-arrow-functions,然后有了这个箭头函数的专门插件后，就可以转换了
插件下载完成后还要去专门去.babelrc配置这个插件，才能使用，官网的粘贴上去就行。
可以先不结合webpack，先本地编译转换，下载babel-cli(我看官网这个依赖了babel-core等很多babel插件，然后babel-cli下载一个就可以代替多个)，下载后就可以使用babel命令了，直接babel src/index.js,控制台就会打印出转化的内容。(我测试失败了，但是不影响)
开始结合webpack和babel，结合无非就是让webpack的loader进行加载需要的js文件进行babel编译，下载babel-loader进行操作。最后跑起来就行。 4.报错的话，他会让你安装babel-loader7以上，按照提示装就行，挺简单的。 5.识别Es7,ES8的语法可以使用其他插件，文件里面写了 6.使用babel-polyfill可以不用像之前那么麻烦看下一个文件夹

5.babel-polyfill和preset

最简单的使用preset的情况下，也就是环境变量，不用独立的插件进行。

yarn add babel-preset-env

首先还是要安装babel-cli用于使用babel打包命令等
安装babel-loader加载所有的js使用babel的语法
配置所有的语法在.babelrc里面，使用环境配置的情况下
安装babel-preset-env插件进行配置环境变量操作。
这个时候就会自动下载很多transform插件了
运行这个babel-cli的时候不能全局使用的时候，使用局部的变量进行执行，就可以使用脚手架了

./node_modules/.bin/babel src/index.js

继续配置浏览器和防止环境变量污染的.babelrc配置

{
  "presets": [[
    "env",
    {
      "target":{
        "browsers":["last 2 versions"]//配置浏览器知识版本
      },
      "debug":true
    }]
  ],
  "plugins":[
    "transform-runtime"//防止运行时promise转换污染全局变量
  ]
}

8.注意index.js引入的内容。

webpack4.0的简单用法