Webpack

1.是什么
webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件
模块：webpack可以处理js/css/图片、图标字体等单位
静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的
动态：从远程服务器请求的内容，webpack没办法处理，只能处理静态的
2.entry和output

//webpack.config.js
entry: {
    main: './src/index.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',  //固定写法 会在dist目录下生成index.js和search.js
    path: path.resolve(__dirname, 'dist'),
  }

3.loader
什么是loader：
loader让webpack能够去处理那些非js文件的模块，如css/图片
babel-loader：使用babel-loader之后就能在webpack中使用babel，
先由babel负责编译js为es5或es3，再由webpack 负责打包
4.plugins

const path = require('path');
//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: {
    main1: './src/index.js',
    main2:'./src/search.js',
  },
  output: {
    filename: '[name].js',  //固定写法 会在dist目录下生成main1.js和main2.js
    path: path.resolve(__dirname, 'dist'),
  },
  //多入口就写多new几个,注意要用filename起别名，不然都叫index.html,后面的search.html也变成index.html后就覆盖了
  //test.html编译后的index.html
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/test.html',
      filename:'test.html',
      chunks:['main1'],  //chunks指定test.html要引入的js文件，否则默认是引入全部
	 minify:{
       //删除index.html中的注释
       removeComments:true,
       //删除index.html中的空格
       collapseWhitespace:true,
       //删除各种html标签属性值的双引号
       removeAttributeQuotes:true,
     }
    }),
    new HtmlWebpackPlugin({
      template:'./src/search.html',
      filename:'search.html',
      chunks:['main2']
    })
  ],
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:'babel-loader'
      }
    ]
  }
}

css-loader可以帮助webpack认识css,
使用import 导入css，像导入js模块一样

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: {
    main1: './src/index.js',  //index.js文件有一行代码import '../css/2.css';
  },
  output: {
    filename: '[name].js',  //如果没有main1，则默认起main.js
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/test.html',
    }),
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        // loader:'css-loader',
        //同时有多个loader时，使用use,注意：webpack会从右向左执行loader
        use:['style-loader','css-loader']
      }
    ]
  }
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  mode: 'development',
  entry:'./src/index.js',
  // entry: {
  //   main1: './src/index.js',
  // },
  output: {
    filename: '[name].js',  //如果没有main1，则默认起main.js
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/test.html',
    }),
    new MiniCssExtractPlugin({
      filename:'css/[name].css', //引入后的css文件位置 dist/css/main.css
    })
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        // loader:'css-loader',
        //同时有多个loader时，使用use,注意：webpack会从右向左执行loader
        // use:['style-loader','css-loader'] //style标签方式引入css
        use:[MiniCssExtractPlugin.loader,'css-loader'] //link方式引入css
      }
    ]
  }
}

file-loader处理css中的图片
如果是外部的资源，是不需要考虑webpack的，只有本地的图片才需要被webpack处理

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  mode: 'development',
  entry:'./src/index.js',
  // entry: {
  //   main1: './src/index.js',
  // },
  output: {
    filename: '[name].js',  //如果没有main1，则默认起main.js
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/test.html',
    }),
    new MiniCssExtractPlugin({
      filename:'css/[name].css', //引入后的css文件位置 dist/css/main.css
    })
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        // loader:'css-loader',
        //同时有多个loader时，使用use,注意：webpack会从右向左使用loader
        // use:['style-loader','css-loader'] //style标签方式引入css
        use:[
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../'   //配置css文件中的图片路径前加../
            }
          },'css-loader'] //link方式引入css
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:{
          loader:'file-loader',
          options:{                 //配置css图片的存放位置
            name:'img/[name].[ext]' //name不是和上面output一样哦，这里的name是图片原来的名字 ext是扩展名
          }
        }
      }
    ]
  }
}

使用html-withimg-loader处理HTML中的图片

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  // entry: {
  //   main1: './src/index.js',
  // },
  output: {
    filename: '[name].js',  //如果没有main1，则默认起main.js
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/test.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css', //引入后的css文件位置 dist/css/main.css
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader:'css-loader',
        //同时有多个loader时，使用use,注意：webpack会从右向左使用loader
        // use:['style-loader','css-loader'] //style标签方式引入css
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'   //配置css文件中的图片路径前加../
            }
          }, 'css-loader'] //link方式引入css
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {                 //配置css图片的存放位置
            name: 'img/[name].[ext]', //name不是和上面output一样哦，这里的name是图片原来的名字 ext是扩展名
            esModule:false,//html-withimg-loader与file-loader合作，即file-loader将图片复制到img目录里后，html-loader就把
            //html中的图片路径改成复制后的位置，但是不需要用到file-loader的es模块导出功能
          }
        }
      },
      {
        test:/\.(htm|html)$/,
        loader:'html-withimg-loader'
      }
    ]
  }
}

file-loader 处理js中的图片
file-loader处理图片时，会把图片复制到dist

import './3.css'; //在js中引入css文件
import img from '../images/map.png'; //在js中引入图片文件
console.log(img); //输出图片复制在dist后的位置 这里是img/map.png
const imgEl = document.createElement('img');
imgEl.src = img;
document.body.appendChild(imgEl);

js中导入图片和css中使用图片一样，都是要用到file-loader

{
  test: /\.(jpg|png|gif)$/,
   use: {
     loader: 'file-loader',
     options: {                 //配置css和js图片的存放位置
       name: 'img/[name].[ext]', //name不是和上面output一样哦，这里的name是图片原来的名字 ext是扩展名
       esModule:false,//html-withimg-loader与file-loader合作，但是不需要用到file-loader的es模块导出功能
     }
   }
 },

通过前期学习了解到处理图片的各种情况
file-loader css img
html-withimg-loader html img
file-loader js img

使用url-loader（功能更全面）处理图片，能够将图片转换为base-64，直接嵌入到HTML中，
减少图片网络请求
在webpack.config.js中file-loader和url-loader只需要配置其中一项就行

{
   test: /\.(jpg|png|gif)$/,
   use: {
     loader: 'url-loader',
     options: {                 //配置图片的存放位置
       name: 'img/[name].[ext]', //name不是和上面output一样哦，这里的name是图片原来的名字 ext是扩展名
       esModule:false,//html-withimg-loader与file-loader合作，但是不需要用到file-loader的es模块导出功能
       limit:10000,//10KB 小于10KB的图片转换为base-64，大于10KB的就按file-loader的方式处理(复制到dist目录里)
     }
   }
 },

webpack-dev-server搭建开发环境，每次编写代码都得手动执行webpack的打包命令，这个插件能够自动打包

"scripts": {
    "build": "babel src -d dist",
    "webpack": "webpack",
    "dev":"webpack-dev-server --open chrome" 
  },

npm run dev 只需要执行一次，以后每次保存都会自动打包，但是不会生成dist目录，上线才需要dist目录，它是放在内存中，