Webpack 学习

1 webpack 5个核心概念

1. Entry 入口，指示webpack以那个文件作为入口文件，分析构建内部依赖图。
2. Output 输出，指示webpack打包后的资源bondles输出到那里去，以及如何命名。
3. Loader， 让webpack能够去处理那些非js文件（webpack只能理解js）
4. Plugins 插件：可以用于执行范围更广的任务。插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量等
5. Mode 模式：指示webpack使用相应模式的配置。

• development：本地测试环境，将process.env.NODE_ENV的值设为development
• production：线上运行环境，将process.env.NODE_ENV设为production

2 运行指令

默认运行指令

• 开发环境 webpack ./src/index.js -o ./build --mode=development

以 ./src/index.js作为入口文件，打包输出到./build中

• 生产环境 webpack ./src/index.js -o ./build --mode=production

以 ./src/index.js作为入口文件，打包输出到./build中

3 配置

配置文件为webpack.config.js

1.  output有两个参数，filename打包文件的名字和path文件存放地址

   const { resolve } = require('path')
   
   module.exports = {
     ...
     output: {
       filename: 'built.js', // 打包文件的名字
       path: resolve(__dirname, 'build') // 文件存放的路径， 
       // resolve：path中的一个方法，把参数从右向左拼接，解析成绝对路径
       // __dirname: 指的是当前文件的目录
     },
     ...
   }
   

2. module，参数rules一个数组用于处理非js文件，loader使用流程：1 下载 2 使用(配置)

   module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.css$/,   // 解析的文件类型
           use: [            // 用于解析的loader，顺序从下到上，从右到左
             'style-loader', // 创建style标签，将js中的样式资源插入进去马，添加到head中生效
             'css-loader'    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
           ]
         },
         {
           test: /\.less$/,
           use: [
             'style-loader',
             'css-loader',
             'less-loader'   // 将less文件转为css
           ]
         }
       ]
     },
     ...
   }
   

3. plugins 使用流程：1 下载 2 引入 3 使用

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
     ...
     plugins:[
       // html-webpack-plugin
       // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源(JS/CSS)
       // 需求：需要有机构的HTML文件
       new HtmlWebpackPlugin({
         // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
         template: './src/index.html'
       }) 
     ],
     ...
   }
   

4. mode

        alias 别名配置，可以将一些常用的文件地址配置简写

**更新中