关于webpack

认识webpack
webpack是一个前端资源打包工具，基于node环境运行，在webpack中，前端所有资源文件（js/html/css/json/scss）都会作为模块处理，打包成对应的静态资源。webpack提供了：
----友好的模块化支持；
----代码压缩混淆
----处理js兼容问题
----性能优化
webpack作用：
----对项目进行打包
----可使用单页面应用程序的打包；
----可打包多页面应用程序；
webpack打包模式：
+开发环境打包：-在开发过程中的打包规则，随时调试，需要浏览器实时更新
+生产环境打包：-开发完成后，进行的打包规则；-需要带啊吗压缩，文件整合，将源文件打包成一份结果文件
webpack打包准备工作：

webpack.config.js文件的配置：

// 在此处书写项目的打包规则
// 在package.json中配置："compack":"webpack",
// 终端运行：npm run compack
/*
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compack":"webpack"
  },

*/ 
// 导入path模块，配置出口文件要用
const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const { optimize } = require('webpack');
// module.exports = { 打包规则书写在这里 }
module.exports = {
  // 1 你要配置的入口文件(不配置，默认是src/index.js)
    entry: './src/index.js',
  // 2 配置出口文件（不配置，默认在根目录的dist文件中的main.js）
    output:{
      // 生成文件的出口，必须是一个绝对路径
      path:path.resolve(__dirname,'./dist'),
      // 最终生成的js文件
      filename:'main.js'
    },
  // 3 配置打包模式（意思就是：按照 开发环境 打包，还是按照 生产环境打包）
  mode:'production',
  // mode:'development'

  // 4 配置插件 （生成一个html页面，使用一个叫做html-webpack-plugin的插件来配置）
    // 下载：npm i -D html-webpack-plugin
  plugins:[
    // 删除本地dist目录
    new CleanWebpackPlugin({
      path:'./dist'
    }),
    // 生成一个html的插件使用
    new htmlwebpackplugin({
      // 生成html的文件配置
      // 生成网站标题
      title:'xxx_project',
      // html文件名，默认是index.html
      filename:'index.html',
      // html模板 默认是基础配置，也可自行设置再导入
      template:'./index.html',
      // 设置html中js文件的引入位置（默认是在head末尾）
      inject:'body', //boy末尾
      // 引入网页小图标
      favicon:'./src/assets/JD.ico'
    }),
    // 生成css文件插件使用
    new MiniCssExtractPlugin({
      filename:'css/[hash].css'
    })
  ],
  /*
  5 配置css解析器
    在index.js文件中直接引入css文件不会解析，需要配置两个解析器
      1- css-loader 作用：解析入口文件index.js中的css文件
      2- style-loader 作用：将解析后的css引入到html单页面应用程序中
    下载：
      npm i -D css-lodaer
      npm i -D style-loader

  */ 
  module:{
    // rules:各种解析器的配置
    rules:[
      // 配置一个css解析器
      {
        // 值是一个正则表达式，表示在入口文件js中遇到哪种类型文件，就交给对应的解析器
        test: /\.css$/, //碰到css结尾的文件
        // 需要用到的解析器,先解析，再导入html文件
        // use:['style-loader','css-loader'] //这种方式是将css写入html的style样式中
        use:[MiniCssExtractPlugin.loader,'css-loader'] // 这种方式是单独生成一个css文件
      },
      // 配置一个sass解析器
      {
        test:/\.(scss|sass)$/,
        // use:['style-loader','css-loader','sass-loader']
        use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
      },
      // 图片解析
      {
        test:/\.(jpg|png|gif|jpeg|webp|)$/,
        loader:'url-loader',
        // 对url解析器的配置
        options:{
          // 尺寸分界线：limit 20kb 以上转换为文件，以下转换为编码，limit单位是b
          limit:1024*20,
          // 大于limit尺寸的图片转换为文件，存储名字
          // [hash] 随机名字
          // [ext] 原始文件的后缀
          name:'imgs/[hash].[ext]',
          esModule:false, // 强制关闭es6语法
        }
      }
    ]
  },
    /*
    6 解析sass文件
      sass解析器下载：npm i -D sass-loader
      sass-loader需要的第三方包下载：npm i -D sass
    */ 
    /*
    7 解析图片
      7-1 不可直接在html中引入，需要在入口js文件中引入
          需要url-loader解析器 指令：npm i -D url-loader
          解析成base64格式，图片越大，编码越长，不利于维护
          将图片转换为文件，需要另外一个解析器：file-loader

      7-2 第二种引入方式 （推荐）
        +在html文件内使用 模板语法 引入
        + <img src= "<%= require(图片地址) %>">
    */ 
    /*
    8 处理CSS问题
      通过style-loader方法，是将css样式放在html的style标签中，
      但是我们需要将css放在一个单独的文件中，并通过link引入
      需要插件协助完成：npm i -D mini-css-extract-plugin
      导入：const MiniCssExtractPlugin = require('mini-css-extract-plugin')
      分布使用： 
        1 该文件中的plugins内的 MiniCssExtractPlugin
        2 该文件中的modules-rules中的配置规则：MiniCssExtractPlugin.loader
    */ 
    /*
    9 自动删除本地的dist目录
      内容一旦修改，重新打包之后，类似的文件会重复生成堆积在dist中
      删除文件夹： npm i -D clean-webpack-plugin
      导入： const {CleanWebpackPlugin} = require('clean-webpack-plugin')
      使用：和htmlwebpackplugin一样，见该文件中的plugins内的 CleanWebpackPlugin
      注意：clean-webpack-plugin需要解构赋值使用
    
    */ 
    /*
    10 对css文件进行百分百压缩
      下载三方插件：optimize-css-assets-webpack-plugin
      导入：const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin')
      使用：需要在该文件的module.exports 内单独配置 optimization
      注意：使用这个插件后，会导致js文件不再压缩
      解决：npm i -D uglifyjs-webpack-plugin
      导入：见该文件开头
    
    */ 
  optimization:{
    // 配置使用哪些插件来压缩文件
    minimizer:[
      // 压缩css
      new OptimizeCssPlugin(),
      // 压缩js
      new UglifyjsWebpackPlugin(),
    ]
  }
}

webpack.config.js文件的配置：（development）
dist中不打包，可热更新，浏览器代码映射到源文件，配置公共路径

// 在此处书写项目的打包规则
// 在package.json中配置："compack":"webpack",
// 终端运行：npm run compack
/*
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compack":"webpack"
  },

*/ 
// 导入path模块，配置出口文件要用
const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const { optimize } = require('webpack');
// module.exports = { 打包规则书写在这里 }
module.exports = {
  // 1 你要配置的入口文件(不配置，默认是src/index.js)
    entry: './src/index.js',
  // 2 配置出口文件（不配置，默认在根目录的dist文件中的main.js）
    output:{
      // 生成文件的出口，必须是一个绝对路径
      path:path.resolve(__dirname,'./dist'),
      // 最终生成的js文件
      filename:'main.js',
      // 当需要使用html-loader的时候，需要配置这个公共路径
      publicPath:'http://localhost:8090/'
    },
  // 3 配置打包模式（意思就是：按照 开发环境 打包，还是按照 生产环境打包）
  // mode:'production',
  mode:'development',

  // 4 配置插件 （生成一个html页面，使用一个叫做html-webpack-plugin的插件来配置）
    // 下载：npm i -D html-webpack-plugin
  plugins:[
    // 删除本地dist目录
    new CleanWebpackPlugin({
      path:'./dist'
    }),
    // 生成一个html的插件使用
    new htmlwebpackplugin({
      // 生成html的文件配置
      // 生成网站标题
      title:'xxx_project',
      // html文件名，默认是index.html
      filename:'index.html',
      // html模板 默认是基础配置，也可自行设置再导入
      template:'./index.html',
      // 设置html中js文件的引入位置（默认是在head末尾）
      inject:'body', //boy末尾
      // 引入网页小图标
      favicon:'./src/assets/JD.ico'
    }),
    // 生成css文件插件使用(开发环境中不需要)
    // new MiniCssExtractPlugin({
    //   filename:'css/[hash].css'
    // })
  ],
  /*
  5 配置css解析器
    在index.js文件中直接引入css文件不会解析，需要配置两个解析器
      1- css-loader 作用：解析入口文件index.js中的css文件
      2- style-loader 作用：将解析后的css引入到html单页面应用程序中
    下载：
      npm i -D css-lodaer
      npm i -D style-loader

  */ 
  module:{
    // rules:各种解析器的配置
    rules:[
      // 配置一个css解析器
      {
        // 值是一个正则表达式，表示在入口文件js中遇到哪种类型文件，就交给对应的解析器
        test: /\.css$/, //碰到css结尾的文件
        // 需要用到的解析器,先解析，再导入html文件
        use:['style-loader','css-loader'] //这种方式是将css写入html的style样式中
        // use:[MiniCssExtractPlugin.loader,'css-loader'] // 这种方式是单独生成一个css文件
      },
      // 配置一个sass解析器
      {
        test:/\.(scss|sass)$/,
        use:['style-loader','css-loader','sass-loader']
        // use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
      },
      // 图片解析
      {
        test:/\.(jpg|png|gif|jpeg|webp|)$/,
        loader:'url-loader',
        // 对url解析器的配置
        options:{
          // 尺寸分界线：limit 20kb 以上转换为文件，以下转换为编码，limit单位是b
          limit:1024*20,
          // 大于limit尺寸的图片转换为文件，存储名字
          // [hash] 随机名字
          // [ext] 原始文件的后缀
          name:'imgs/[hash].[ext]',
          esModule:false, // 强制关闭es6语法
        }
      }
    ]
  },
    /*
    6 解析sass文件
      sass解析器下载：npm i -D sass-loader
      sass-loader需要的第三方包下载：npm i -D sass
    */ 
    /*
    7 解析图片
      7-1 不可直接在html中引入，需要在入口js文件中引入
          需要url-loader解析器 指令：npm i -D url-loader
          解析成base64格式，图片越大，编码越长，不利于维护
          将图片转换为文件，需要另外一个解析器：file-loader

      7-2 第二种引入方式 （推荐）
        +在html文件内使用 模板语法 引入
        + <img src= "<%= require(图片地址) %>">
    */ 
    /*
    8 处理CSS问题
      通过style-loader方法，是将css样式放在html的style标签中，
      但是我们需要将css放在一个单独的文件中，并通过link引入
      需要插件协助完成：npm i -D mini-css-extract-plugin
      导入：const MiniCssExtractPlugin = require('mini-css-extract-plugin')
      分布使用： 
        1 该文件中的plugins内的 MiniCssExtractPlugin
        2 该文件中的modules-rules中的配置规则：MiniCssExtractPlugin.loader
    */ 
    /*
    9 自动删除本地的dist目录
      内容一旦修改，重新打包之后，类似的文件会重复生成堆积在dist中
      删除文件夹： npm i -D clean-webpack-plugin
      导入： const {CleanWebpackPlugin} = require('clean-webpack-plugin')
      使用：和htmlwebpackplugin一样，见该文件中的plugins内的 CleanWebpackPlugin
      注意：clean-webpack-plugin需要解构赋值使用
    
    */ 
    /*
    10 对css文件进行百分百压缩
      下载三方插件：optimize-css-assets-webpack-plugin
      导入：const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin')
      使用：需要在该文件的module.exports 内单独配置 optimization
      注意：使用这个插件后，会导致js文件不再压缩
      解决：npm i -D uglifyjs-webpack-plugin
      导入：见该文件开头
    
    */ 
  // optimization:{
  //   // 配置使用哪些插件来压缩文件
  //   minimizer:[
  //     // 压缩css
  //     new OptimizeCssPlugin(),
  //     // 压缩js
  //     new UglifyjsWebpackPlugin(),
  //   ]
  // },

  /*
  11 开发环境需要配置一个服务器
    +需要ajax请求，需要实时更新页面（热加载）
    +三方工具：webpack-dev-server
    +在module.exports中到哪都配置 devServer:{}
    +在optout 中配置一个publicPath，配置我们设置的域名和端口号
    +注意：在package.json中配置打包命令，不再使用webpack，而是使用webpack-dev-server
  */ 
  // 7 配置服务器
  devServer:{
    // 你启动的域名（ip）
    host:'localhost',
    // 端口号：
    port:8090,
    // 热更新,默认是false
    hot:true,

  },
  /*
  12 将代码映射到源文件
    +在module.exports中添加一个选项：devtool:'source-map'
  
  */ 
  //  7 浏览器代码映射到源文件
  devtool:'source-map',
}

webpack多页面打包（day95-webpack-03）：

修改目录结构：


配置入口文件：


修改文件出口位置：

修改配置文件的html模板：