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:'$'
  }

}