一、创建配置文件

1.配置文件名：webpack.config.js

2.基础配置： 

let { resolve } = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/built.js',//打包输出后会输出到js目录下
    path: resolve(__dirname, 'build')//所有的打包资源输出到build目录下
  },
  module: {
    rules: []
  },
  plugins: [],
  mode: 'development',//模式 默认两种 producttion development
}

3.运行项目指令：

webpack


二、打包样式资源

整体流程:
首先通过entry分析内部依赖图，资源通过loader进行处理，如果使用test匹配到相应的资源就使用对应的loader，loader从下至上，从左至右执行，将样式以commonjs的形式加载到js中，创建style标签嵌入head标签中加载样式，输出文件的目录和名字由output指定

1.打包less文件

使用到的loader：style-loader css-loader less-loader
style-loader：创建style标签将js中的样式资源嵌入到页面的head标签中
css-loader：将css文件变成commonjs模块加载到js中，内容是样式字符串
less-loader：将less文件编译为css文件 
 {
   test: /\.less$/,//匹配文件
   use: ['style-loader', 'css-loader', 'less-loader'],
 },
     

2.打包css文件

使用的loader：style-loader css-loader 
 {
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'less-loader'],   },

三、打包HTML资源

使用的html-webpack-plugin插件，默认创建一个空的HTML，自动引入打包输出的所有资源(JS/CSS) 
 new HtmlWebpackPlugin({
      template: './src/index.html'//复制index.html文件，并自动引入打包输出的所有资源
 }),

四、打包图片资源

使用的loader：url-loader file-loader（url-loader依赖于file-loader） 
 {     //注意：处理不了html中img引入的图片
    test: /\.(png|gif|jpg|jpeg)$/,
    use: {
       loader: 'url-loader',
      options: {
          limit: 8 * 1024,//图片小于8KB就会base64处理，减少请求次数，但是图片体积会更大
        name: '[hash:10].[ext]',//给打包后的图片重命名，并且保留扩展名
        esModule: false,
        outputPath: 'imgs'//图片文件打包输出的目录
      }
      }
 },
  {       //处理html中img图片，负责引入img,从而能被url-loader进行处理
          test:/\.html$/,
          loader:'html-loader'  
  }
注意：这样配置以后还会出现一个问题，html-loader引入是以commonjs的方式，而上面的url-loader会使用es6的模块语法去解析，所以就解析不了，因此需要将url-loader的es6模块化关闭：esMoudle：false

五、打包其他资源（如字体图标...）

打包css/html/js以外的资源，这些资源不需要做优化、压缩等等操作
使用的loader：file-loader 
 {
     exclude: /\.(css|js|html|less|png|jpg|jpeg|gif)$/,//处理这些排除资源以外的资源
     loader: 'file-loader',
     options: {
              name:  '[hash:10].[ext]'，//对打包后的资源重命名
       outputPath: 'media'//打包输出到指定的目录
     }
  },

六、devServer

devServe：用来自动化（自动编译、自动打开浏览器、自动刷新浏览器），只会在内存中编译打包，不会有任何输出（而如果运行的指令是webpack会有内存输出）
下载指令：npm i webpack-dev-server
启动指令：npx webpack-dev-server 
 devServer: {
    //自动更新，只会在内存中编译打包，不会有任何输出，下载指令：npm i webpack-dev-server
    contentBase: resolve(__dirname, 'build'),//构建后的路径
    compress: true,//启动gzip压缩
    port: 3000,//端口号
    open: true//自动打开浏览器
  }