一、创建配置文件

1.创建文件 webpack.config.js

webpack.config.js 是 webpack 的配置文件
作用: 指示 webpack 干哪些活（当运行 webpack 指令时，会加载里面的配置）
所有构建工具都是基于 nodejs 平台运行的——模块化默认采用commonjs。

2.配置内容

  1. module.exports = {
  2.   entry: './src/js/index.js', // 入口文件 
  3.   output: { // 输出配置
  4.     filename: './built.js', // 输出文件名 
  5.     path: resolve(__dirname, 'build/js') // 输出文件路径配置 
  6.   },
  7.   // loader 的配置
  8.   module:{
  9.       rules:[
  10.               // 详细 loader 配置 
  11.        // 不同文件必须配置不同 loader 处理
  12.       ]
  13.   },
  14.   // plugins 的配置 
  15.    plugins: [ 
  16.      // 详细 plugins 的配置 
  17.    ],
  18.    mode: 'development' //开发环境
  19.  };

use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
loader: 1. 下载 2. 使用（配置loader）
plugins: 1. 下载 2. 引入 3. 使用
要使用多个 loader 处理用 use，使用一个 loader 处理用loader

3.打包样式资源(css和less）

  1.  // loader的配置
  2.  module: {
  3.    rules: [
  4. // 详细loader配置
  5. // 不同文件必须配置不同loader处理
  6. {
  7. test: /\.css$/,
  8. // 使用哪些loader进行处理
  9. use: [
  10. 'style-loader',
  11. 'css-loader'
  12.     ]
  13. },
  14. {
  15.   test: /\.less$/,
  16.   use: [
  17.    'style-loader',
  18.    'css-loader',
  19.     // 需要下载 less-loader和less
  20.    'less-loader'
  21.         ]
  22.       }
  23.     ]
  24.   },

3.创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader'
2.将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
1.将less文件编译成css文件
'less-loader'

4.打包 HTML 资源

引入打包 HTML 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
可以传入配置对象（template 模板复制 ‘./src/index.html’ 文件，并自动引入打包输出的所有资源（JS/CSS））

  1.  plugins: [
  2.     // plugins的配置
  3.     // 需求：需要有结构的HTML文件
  4.         new HtmlWebpackPlugin({
  5.           template: './src/index.html'
  6.   })
  7. ],

5.打包图片资源

  1. module:{
  2.   rules:[{
  3.     // 问题：默认处理不了html中img图片
  4.     // 处理图片资源
  5.     test: /\.(jpg|png|gif)$/,
  6.     // 下载 url-loader file-loader
  7.     loader: 'url-loader',
  8.     options: {
  9.     // 图片大小小于8kb，就会被base64处理
  10.     // 优点: 减少请求数量（减轻服务器压力）
  11.     // 缺点：图片体积会更大（文件请求速度更慢）
  12.        limit: 8 * 1024,
  13.     // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
  14.     // 解析时会出问题：[object Module]
  15.     // 解决：关闭url-loader的es6模块化，使用commonjs解析
  16.     esModule: false,
  17.     // 给图片进行重命名
  18.     // [hash:10]取图片的hash的前10位
  19.     // [ext]取文件原来扩展名
  20.     name: '[hash:10].[ext]'
  21.         }
  22.   },
  23.          {
  24.     test: /\.(html|htm)$/,
  25.     // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  26.     loader: 'html-loader'
  27.          }]
  28. }

6.打包其他资源(如字体图标）

  1.   module: {
  2.    rules: [
  3.      {
  4.      test: /\.css$/,
  5.      use: ['style-loader', 'css-loader']
  6.       },
  7.     // 打包其他资源(除了html/js/css资源以外的资源)
  8.       {
  9.     // 排除css/js/html资源
  10.       exclude: /\.(css|js|html|less)$/,
  11.       loader: 'file-loader',
  12.       options: {
  13.          name: '[hash:10].[ext]'
  14.         }
  15.       }
  16.     ]
  17.   },

7.devserver

开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
特点：只会在内存中编译打包，不会有任何输出
启动 devServer 指令为：npx webpack-dev-server

  1.   devServer: {
  2.     // 项目构建后路径
  3.     contentBase: resolve(__dirname, 'build'),
  4.     // 启动gzip压缩
  5.     compress: true,
  6.     // 端口号
  7.     port: 3333,
  8.     // 自动打开浏览器
  9.     open: true
  10.   }

二、目的

开发环境配置：能让代码运行
运行项目指令：
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包，没有输出