webpack学习

webpack是什么？

webpack本身是, node的一个第三方模块包, 用于打包代码

webpack能做什么？

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

webpakc在项目中的使用

yarn add webpack webpack-cli -D // -D是把资源引用到devDependencies当中，也就是开发阶段的依赖，之在开发环境中起作用

在package.json中配置

scripts: {
	"build": "webpack"
}

webpack的配置、

在 webpack.config.js中配置 module.exports={}

mode

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
```
module.exports = {
  mode: 'production',
};
```
entry

entry 是 webpack配置模块的入口，告诉 webpack 从什么哪里开始打包

默认入口 ./src/index.js

如果是用数组的方式 entry:['./src/a.js','./src/b.js'] 就是把这两个文件打包成一个文件

如果是用对象的方式 entry:{a:'./src/a.js',b:'./src/b.js'}] 就是把这两个文件分别打包成 a.js和 b.js根据键名来打包

output

output 是 webpack配置模块的出口，告诉 webpack 打包后输出到哪里

默认出口 ./dist/main.js

filename:'main.js' 是配置打包后的文件名

filename:'[name].js' 是对应多文件打包

clean:true 是清理 path指定的打包目录然后在进行打包

path:path.resolve(__dirname,'dist')是指定打包的路径，必须要绝对路径

loaders

webpack默认只会处理js文件，如果我们希望他可以处理其他类型的文件，则需要引入对应的loader

loader 用于对模块的源代码进行转换

你可以使用 loader告诉 webpack加载 CSS文件，或者将 TypeScript转为 JavaScript。为此，首先安装相对应的 loader：
```
npm install --save-dev css-loader ts-loader
```
然后指示 webpack对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader:
```
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] },
        //css-loader只负责让css文件能够打包，但不会生效；所以要加一个style-loader;并且这个loader数组类似于一个栈(先入后出)，所以说是从后往前执行的，相反则不会生效。
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};
```
如果是图片这一些资源类型的数据，可以直接指定type来处理(不需要引入loader)
```
{
	test:/\.(jpg|png|git)$/i,
	type:'asset/resource'
}
```

Babel

Babel是什么？

Babel 编写下一代 JavaScript的编译器。

babel-loader

此 package允许你使用 babel和 webpack转译 JavaScript 文件。

npm install -D babel-loader @babel/core @babel/preset-env webpack

配置

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
          loader: 'babel-loader',
          options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

在 package.json中配置browserslist属性设置兼容列表

"browserslist":{
    "defaults",
    "ie 6-8"
}

plugin(插件)

插件目的在于解决 loader无法实现的其他事。Webpack 提供很多开箱即用的插件。

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象。

用法:

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],

ProgressPlugin 用于自定义编译过程中的进度报告，HtmlWebpackPlugin 将生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。

开发服务器

yarn add -D webpack-dev-server
//启动
yarn webpack serve --open //open 打包好了没了后自动打开浏览器

我们写代码不免会有敲错的时候，我们可以发现，用webpack打包完的项目的报错只会出现在打包后的文件中，不会定位到打包前的文件，设置devtool:inline-source-map可以将错误直接定位到打包前的源文件中年，配置如下：

devtool:'inline-source-map'   该属性与entry、ouput等同级

webpack学习记录

webpack学习

mode

entry

output

loaders

Babel

plugin(插件)

开发服务器