webpack的基本使用

1.新建项目空白目录 并运行 npm init -y 初始化包管理配置文件 package.json
2.运行 npm install webpack webpack-cli -D安装webpack相关的包
3.在项目根目录中，创建名为webpack.config.js的配置文件
4.在webpack的配置文件中，初始化以下基本配置

module.exports={
mode:'development'  //development为开发模式，production为发布模式
}

5.在packge.json的配置文件中的scripts节点下，新增dev脚本如下

"scripts":{
	"dev":"webpack"    //scripts节点下的脚本可通过npm run执行
}

6.在终端中运行npm run dev 命令，启动webpack进行项目打包

二。配置打包的入口与出口

要修改打包的入口与出口，可以在 webpack.config.js中新增如下配置信息：

一.单入口，单出口配置

const path = require('path');//导入node.js中专门操作路径的模板
module.exports={
	mode:'development',  //development为开发模式，production为发布模式
	//指定打包的入口文件路径
        entry: path.join(__dirname,'./src/index.js'),
        output:{
            //指定打包的出口文件目录
            path: path.join(__dirname,'./dist'),
            //输出文件的名称
            filename: 'bundle.js'
        }
}

二.多入口单出口配置

    entry:{
        entryKey:['./src/index.js','./src/index1.js']
        },
    output:{      
              //指定打包的出口文件目录            
              path: path.join(__dirname,'./dist'),      
              //输出文件的名称 
               filename: 'bundle.js'      
          },

三。多入口多出口

    entry:{             
         index:'./src/index.js',      
         index1:'./src/index1.js'        
            },    
     output:{         
        //指定打包的出口文件目录           
         path: path.join(__dirname,'./dist'),      
           //输出文件的名称          
          filename: '[name]-bundle.js'        //[name]-或者[name].是入口文件的名字
              },
              
## 配置we

plugins:[//plugins数组   webpack打包期间会用到的一些插件列表                      
  new HtmlWebpackPlugin({   //创建插件的实例对象          
      chunks:['index'],    //所要用到的js文件 （ 上面entry的键）          
      title:'首页',                      
      filename:'index.html',     //指定生成文件的名称，该文件存在于内存中，在目录中不显示              
      template:'./src/index.html'        //指定要用到的模板文件                             
      }),             
  new HtmlWebpackPlugin({       
       chunks:['index1'],           
       title:'第二页',          //所要用到的js文件 （ 上面entry的键）                 
       filename:'index1.html'   ,          //指定生成文件的名称，该文件存在于内存中，在目录中不显示                 
       template:'./src/index1.html'        //指定要用到的模板文件                             }),
       ]

bpack自动打包功能

1.运行 npm i webpack-dev-server -D命令安装支持项目自动打包工具
2.修改package.json下scripts下的dev：

"dev": "webpack-dev-server"

3.将src下index.html中script脚本的引用路径修改为 buidle.js
4.运行npm run dev重新进行打包

配置html-webpack-plugin生成预览页面

1.运行npm i html-webpack-plugin -D，安装生成预览页面的插件
2.修改webpack。config。js文件添加如下配置：

const HtmlWebpackPlugin=require('html-webpack-plugin')  //导入生成预览页面的插件。得到一个构造函数
const htmlPlugin=new HtmlWebpackPlugin({   //创建插件的实例对象
    template:'./src/index.html',          //指定要用到的模板文件
    filename:'index.html'                //指定生成文件的名称，该文件存在于内存中，在目录中不显示
})

3.修改webpack。config。js文件中向外暴露的配置对象，新增如下配置节点：

module.exports={
plugins:[htmlPlugin]     //plugins是数组   webpack打包期间会用到的一些插件列表

}

配置自动打包相关的参数

//package.json中的配置
//--open打包完成后自动打开浏览器页面
//--host  配置ip地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888 --open"
}

webpack中的加载器

1.运行 npm i style-loader css-loader -D
2.在webpack。config。js的module——>数组中，添加loader规则：

module.exports={
   mode:'development' , //development为开发模式，production为发布模  	
//第三方所有文件模块的匹配规则
   module:{
        rules:[
            {test:/\.css/,use:['style-loader','css-loader']}
            //其中test表示匹配的文件类型，use表示对应要调用的loader
            ]
    }
}

打包处理less文件

1.运行 npm i less-loader less -D
2.在webpack。config。js的moudle——>rules中添加规则：

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

配置postCSS自动添加css的兼容前缀

1.运行npm i postcss-loader autoprefixer -D
2.在项目根目录中创建postcss的配置文件 postcss。config。js， 冰初始化如下配置：

const autoprefixer=require('autoprefixer')
module.exports={
    plugins:[autoprefixer]   //挂载插件
}

3.在webpack。config。js的module的rules数组中修改css的规则：

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

打包样式表中的图片和字体文件

1.运行npm i url-loader file-loader -D
2.在webpack。config。js的rules数组中添加如下规则：

        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.jpg|png|gif|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'}
            ]
            //其中？之后的是loader的参数项
            //limit用来指定图片的大小，单位是字节byte，只有小鱼limit大小的图片，才会转为base64图片

打包处理js文件中的高级语法

1.安装*babel转换器相关的包：cnpm i babel-loader @babel/core @babel/runtime -D
2.安装babel语法插件相关的包：cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中创建babel配置文件 babel.config.js并初始化：

module.exports={
    presets: ["@babel/preset-env", "@babel/preset-react", "mobx"],
    plugins: [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

4.在webpack.config.js的module ——rules数组中添加如下规则：

        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.jpg|png|gif|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'},
            //exclude为排除项，表示不需要处理node_modules中的js文件
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
        ]

webpack打包发布

在package.json文件配置打包命令
在scripts节点下添加

"build":"webpack -p"

第三方库的使用

1.下载
2.第一种方法：index文件中直接用import引入
第二种：用webpack中自带的小插件
①在webpack.config.js中引入

  const webpack=require('webpack')

②在plugins数组中添加

  new webpack.ProvidePlugin({
	$:'jquery'
})
 

两种区别：

第一种无论知否使用到第三方库，都会被打包到出口文件，增加了代码冗余量

优化 js文件分离

用到插件会导致入口文件内存过大 ，这时候就需要用到js文件分离
webpack在3版本的时候要用到插件commonsChunkgin， 在4版本之后用自带属性optimization.splitChunks

使用方法：
在webpack.config.js文件中 新增一个节点

optimization:{
    splitChunks:{
        cacheGroups
	  vender:{
	    chunks:'async' ,  //同步或异步
	    name:'jquery' , //要拆分的块
		},
    }
}