webpack 配置文件设置

运行模式

mode

• development 开发模式
• production 发布模式

打包

1. 导入 path 模块

   const path = require('path')

2. 设置打包入口

   entry:path.join(__dirname,'文件路径')

3. 设置打包出口 ```javascript output:{ path:path.join(__dirname,’打包后文件存放路径’), filename:’打包后文件的名称’ }

// __dirname: 当前文件路径

<a name="kU4JC"></a>
### 默认配置
在 webpack 5.x 和 webpack 4.x 中存在一些默认配置
- 打包入口文件    _src\index.js_
- 打包出口文件    _dist\main.js_
<a name="DvCeu"></a>
## devServer
- open 为 true 时，首次打包自动打开浏览器
- host 实时打包主机地址
- port 主机端口
> 80端口 在 http 协议中会自动隐藏
```javascript
devServer: {
    /* 首次打包，自动打开浏览器 */
    open: true,
    /* 实时打包主机地址 */
    host: '127.0.0.1',
    /* 主机端口 */
    port: 6060
  }

package.json 文件配置

scripts

• “dev”: “webpack”

• “dev”: “webpack serve”

  安装了 webpack-dev-server，会将打包的 js 文件放在项目根目录内存中

• “build”: “webpack —mode production”

  将项目打包，即将 webpack 运行模式改为发布模式

插件

HtmlPlugin

在文件夹根目录下生成一份 index.html，使打包后自动打开浏览器可以直接访问页面

1. 导入

   const HtmlPlugin= require('html-webpack-plugin')
   

2. 创建对象

   const htmlPlugin = new HtmlPlugin({
    template: '原文件路径',
   filename: '生成的文件路径'
   })
   

3. 挂载插件

   plugins: [htmlPlugin]
   

   CleanWebpackPlugin

   在打包时自动删除之前生成的 dist 文件夹

4. 导入

   var { CleanWebpackPlugin } = require('clean-webpack-plugin');
   

5. 挂载插件

    plugins: [new CleanWebpackPlugin()]
   

   loader 加载器

   model 模组

   rules 匹配规则数组

   test 为正则表达式，筛选符合条件的文件
   user 为解析该文件需要的加载器

• css

  /* css 样式文件 */
  { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  

• scss

  /* scss 样式文件 */
  { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
  

• less

  /* less 样式文件 */
  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
  

• 图片

  /* 图片路径 */
  { test: /\.jpg|png|gif|jpeg|bmp$/, use: 'url-loader?limit=64000&outputPath=images' }
  // limit: 最大解析字节数，超过这个大小的图片不会解析
  // outputPath: 打包后的图片文件存储地址，这里将图片存放在 images 文件夹
  

• 高级 js 语法

  /* 高级 js 语法 */
  { test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/' }
  // exclude: 忽略的文件夹
  

配置路径快捷访问方式

/* 路径快捷 */
  resolve: {
    alias: {
      /* @ 代替 src 文件夹 */
      '@': path.join(__dirname, './src/')
    }
  }

调试工具

SourceMap

打包后代码与源码位置匹配

项目发开阶段

devtool: 'eval-source-map'
// 项目需要上线时，关闭调试工具，防止代码暴露

项目发布阶段

devtool: 'nosoures-source-map'
// 通过控制器无法定位源码