webpack学习

1.webpack
项目-----》装载器------》插件------》浏览器
loader：将浏览器不能识别的文件转化为html，js，css
插件：对文件进行处理像压缩，合并等
入口：
出口：

创建webpack
webpack init -y

webpack零配置打包
npx webpack
只打包js文件生成main.js

webpack指定配置
默认入口：  src/index.js
默认出口：  dist/main.js

插件
html-webpack-plugin：
  plugins:[
    new htmlWebpackPlugin({
      template:'./src/index.html',//指定输出得文件模板
      filename:'main.html'//指定输出的文件名
    })
  ]

  webpack-dev-server:
  配置：
   "scripts": {
    "dev":"webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

在webpack.config.js中配置

  使用命令 npm run dev

  webpack默认只支持js，不支持css
  需要css-loader  
  style-loader: 将css直接添加到html的script标签中
  装载器的执行顺序从右到左   
  module:{
    rules:[
      {
        test:/\.css/,
        use:['style-loader','css-loader']

      }
    ]
  }

  加载多个css文件在index.css中可以导入别的样式文件也能打包
  @import './color.css';
  body{
    background: red;
  }

less-loader
 {
    test:/\.less/,
    use:['style-loader','css-loader','less-loader']

  }

@import './color.css';
@import './index.less';
body{
  background: red;
}

抽取css作为一个文件 css文件抽取器
插件： mini-css-extract-plugin

使用：
const cssMiniExtractPlugin = require('mini-css-extract-plugin')
 plugins:[
    new htmlWebpackPlugin({
      template:'./src/index.html',//指定输出得文件模板
      filename:'index.html'//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html

    }),
    new cssMiniExtractPlugin({
      filename:'index.css'
    })
  ],
 module:{
    rules:[
      {
        test:/\.css/,
        // use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
        use:[cssMiniExtractPlugin.loader,'css-loader']

      },
      {
        test:/\.less/,
        use:[cssMiniExtractPlugin.loader,'css-loader','less-loader']

      }
    ]
  }

  mode改为production，打包的时候会把js压缩，css没有被压缩
  css压缩插件  optimize-css-assets-webpack-plugin CssMinimizerWebpackPlugin
  css-minimizer-webpack-plugin插件更新使用方法相同
使用：const OptCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
 optimization:{
    minimizer:[new OptCssAssetsWebpackPlugin()]
  },
  
  配置了css压缩后js压缩会失效，需要指定js压缩插件
terser-webpack-plugin
配置：  
optimization:{
    minimizer:[new OptCssAssetsWebpackPlugin(),new terserWebpackPlugin()]
  },

webpack5支持部分es6，不支持es7
babel是一个javascript编译器
使用装载器   babel-loader
安装插件：npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-decorators --legacy-peer-deps
配置：{
        test:/\.js$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:[
              "@babel/preset-env"
            ],
          }
        }

      }

js模块化：

  commonjs  ：
  a.js
  let c = 'a'   
  module.exports = {
    c
  }
  加载：
  let c = require('./a.js');

  es6导出
  a.js
  const a = 444
  export default a
  加载
  import a from './a.js'

tree shaking 树摇   在生产模式中启用
将没有使用的代码在打包中去掉（去掉不用的代码）
webpack4的这个功能很弱，只支持当前js中午用的代码删除
webpack5加强了这个功能

打包生成dist目录没有分类存储
打包生成动态名字和hash
 filename:'css/[name].[hash].css'
  filename:'css/[name].[hash：4].css' 4位hash值
 第一次打包文件会被浏览器自动缓存，当第二次修改打包发布文件不变，文件不会下载新的文件
hash：内容hash，内容有改变hash值就会改变

全局变量  jquery
全局变量使用import导入就需要每个地方都需要导入
配置全局变量
const webpack = require('webpack')
webpack.providePlugin 能够给所有组件注入全局变量
new webpack.ProvidePlugin({
  $:'jquery'
})

这样问题是会把jquery三方包一起打包，会造成打包的文件很大
将别的包使用cdn链接引入项目
  externals:{
    jquery:'$'
  }

图片加载  file-loader
file-loader默认使用的是es6的模块化
{
  test:/\.(jpg|png|webp)$/,
  use:[{
    loader:'file-loader',
    options: {
      esModule:false,//默认使用es6的模块化，false是commonjs模块化
      name: '[name].[ext]',
      outputPath: 'images/'
  }
  }],
},
1.使用js导入
2.css导入
 {
        test:/\.css$/,
        // use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
        use:[{
          loader: cssMiniExtractPlugin.loader,
          options: {
            publicPath:'../'
          }
        },'css-loader']

      },
3.html使用图片
插件  html-withimg-loader
配置：  {
        test:/\.html$/,
        use:['html-withimg-loader']
      },
url-loader使用方法和file-loader相同，只是url-loader可以设置limit属性在图片小于这个限制可以转化为base64

样式兼容性
chrome:webkit
等到所有厂商都支持后可以去掉前缀
安装插件： yarn add  -D autoprefixer postcss-loader  --legacy-peer-deps

使用创建配置文件：postcss.config.js
module.exports = {
  plugins:[
    require('autoprefixer')
  ]
}
在package.json中添加
  "browserslist":[
    "> 1%",
    "last 100 version",
    "not ie<=8"
  ]

配置postcss-loader
  {
    test:/\.css$/,
    // use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
    use:[{
      loader: cssMiniExtractPlugin.loader,
      options: {
        publicPath:'../'
      }
    },'css-loader',,'postcss-loader']

  },

单页面应用：页面都是动态生成，标签数据 单个html
多页面应用：  大型应用   静态化   多个html、

webpack多环境打包
各个环境服务器ip不同
.env 配置文件
模板模式：首先要有一个模板，这个模板会实现大部分功能，只留下部分未实现，子文件继承模板，自己扩展 最终得到一个子和父的合体
根究不同的环境配置

webpack.base.js  模板
webpack.dev.js  开发环境
webpack.prod.js 生产环境

多种跨域支持：

1.cors：后端处理
2.代理 nginx
3.webpack处理跨域
webpack代理 只能在开发中使用
devServer:{//w=配置webpack-dev-server
    port:"8080",//配置端口
    open:true,//自动打开浏览器
    // progress:true,//显示进度
    // contentBase:'./dist'//指定web服务器的根目录默认是dist
    proxy:{
      '/api':{
        target:'http://...',
        // pathRewrite:{
        //   '/api':''//去掉前缀/api
        // }
      }
    }
  },

4.将后端服务与前端服务整合到一块
const webpack = require('webpack');
const middle = require("webpack-dev-middleware");
const config = require('./webpack.config");
const compile = webpack(config);
app.use(middle(compile))

5.jsonp

热更新（热加载）
devServer:{//w=配置webpack-dev-server
    port:"8080",//配置端口
    open:true,//自动打开浏览器
    hot:true,//开启热更新
    // progress:true,//显示进度
    // contentBase:'./dist'//指定web服务器的根目录默认是dist
    proxy:{
      '/api':{
        target:'http://...',
        // pathRewrite:{
        //   '/api':''//去掉前缀/api
        // }
      }
    }
  },
单页面应用配置

const path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
const cssMiniExtractPlugin = require('mini-css-extract-plugin');
// const OptCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
const OptCssAssetsWebpackPlugin =require('css-minimizer-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')
// node写法，webpack基于node
module.exports = {
  mode:'production',//production、development
  // 入口
  entry:'./src/index.js',
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:'js/[name].[hash].js'
  },
  devServer:{//w=配置webpack-dev-server
    port:"8080",//配置端口
    open:true,//自动打开浏览器
    // progress:true,//显示进度
    // contentBase:'./dist'//指定web服务器的根目录默认是dist
  },
  optimization:{
    minimizer:[new OptCssAssetsWebpackPlugin(),new terserWebpackPlugin()]
  },
  plugins:[
    new htmlWebpackPlugin({
      template:'./src/index.html',//指定输出得文件模板
      filename:'index.html'//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html

    }),
    new cssMiniExtractPlugin({
      filename:'css/[name].[hash].css'
    }),
    new webpack.ProvidePlugin({
      $:'jquery'
    })
    
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        // use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
        use:[{
          loader: cssMiniExtractPlugin.loader,
          options: {
            publicPath:'../'
          }
        },'css-loader',,'postcss-loader']

      },
      {
        test:/\.less$/,
        use:[cssMiniExtractPlugin.loader,'css-loader','less-loader','postcss-loader']

      },
      // {
      //   test:/\.(jpg|png|webp)$/,
      //   use:[{
      //     loader:'file-loader',
      //     options: {
      //       esModule:false,//默认使用es6的模块化，false是commonjs模块化
      //       name: '[name].[ext]',
      //       outputPath: 'images/'
      //   }
      //   }],
      // },
      {
        test:/\.(jpg|png|webp)$/,
        use:[{
          loader:'url-loader',
          options: {
            esModule:false,//默认使用es6的模块化，false是commonjs模块化
            name: '[name].[ext]',
            outputPath: 'images/',
            limit:100*1024
        }
        }],
      },
      {
        test:/\.html$/,
        use:['html-withimg-loader']
      },
      {
        test:/\.js$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:[
              "@babel/preset-env"
            ],
          }
        }

      }

    ]
  },
//排除不需要的第三方包
  externals:{
    jquery:'$'
  }

}

多页面应用：

// 多页面应用打包需要指定多个入口多个出口
const path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
const cssMiniExtractPlugin = require('mini-css-extract-plugin');
// const OptCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
const OptCssAssetsWebpackPlugin =require('css-minimizer-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')
// node写法，webpack基于node
module.exports = {
  mode:'production',//production、development
  // 入口多页面应用
  entry:{
    index:'./src/index.js',
    other:'./src/other.js'

  },
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:'js/[name].[hash].js'//多个入口就输出多个文件
  },
  devServer:{//w=配置webpack-dev-server
    port:"8080",//配置端口
    open:true,//自动打开浏览器
    hot:true,//开启热更新
    // progress:true,//显示进度
    // contentBase:'./dist'//指定web服务器的根目录默认是dist
    proxy:{
      '/api':{
        target:'http://...',
        // pathRewrite:{
        //   '/api':''//去掉前缀/api
        // }
      }
    }
  },
  optimization:{
    minimizer:[new OptCssAssetsWebpackPlugin(),new terserWebpackPlugin()]
  },
  plugins:[
    // 输出主页 引入的js也不一样
    new htmlWebpackPlugin({
      template:'./src/index.html',//指定输出得文件模板
      filename:'index.html',//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html
      chunks:['index']
    }),
    // 输出别的页面
    new htmlWebpackPlugin({
      template:'./src/index.html',//指定输出得文件模板
      filename:'other.html',//指定输出的文件名,最好使用index.html，这样运行的时候可以直接找到index.html
      chunks:['index','other']
    }),
    new cssMiniExtractPlugin({
      filename:'css/[name].[hash].css'
    }),
    new webpack.ProvidePlugin({
      $:'jquery'
    })
    
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        // use:['style-loader','css-loader'] 使用cssMiniExtractPlugin插件将css抽出
        use:[{
          loader: cssMiniExtractPlugin.loader,
          options: {
            publicPath:'../'
          }
        },'css-loader',,'postcss-loader']

      },
      {
        test:/\.less$/,
        use:[cssMiniExtractPlugin.loader,'css-loader','less-loader','postcss-loader']

      },
      // {
      //   test:/\.(jpg|png|webp)$/,
      //   use:[{
      //     loader:'file-loader',
      //     options: {
      //       esModule:false,//默认使用es6的模块化，false是commonjs模块化
      //       name: '[name].[ext]',
      //       outputPath: 'images/'
      //   }
      //   }],
      // },
      {
        test:/\.(jpg|png|webp)$/,
        use:[{
          loader:'url-loader',
          options: {
            esModule:false,//默认使用es6的模块化，false是commonjs模块化
            name: '[name].[ext]',
            outputPath: 'images/',
            limit:100*1024
        }
        }],
      },
      {
        test:/\.html$/,
        use:['html-withimg-loader']
      },
      {
        test:/\.js$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:[
              "@babel/preset-env"
            ],
          }
        }

      }

    ]
  },
//排除不需要的第三方包
  externals:{
    jquery:'$'
  }

}