10-10-webpack使用

最新webpack

安装

基于工程化项目开发，项目的入口只能有一个。 我们把依赖都放到这个入口文件中，使用ES6规范 import 引入其他文件，但会发现浏览器根本不能识别，需要借助webpack这个工具，让浏览器识别。
在webpack4.0之后，支持零配置打包，你不需要进行任何配置。
在老的webpack版本，你需要写代码去配置你的webpack。

安装前先进行初始化 npm init -y

安装webpack:
    本地安装：npm i webpack webpack-cli
    全局安装：npm i webpack webpack-cli  -g

npx:
你要使用webpack命令，你必须全局安装webpack
如果你不想全局安装，那么就可以使用npx
npx 默认会临时全局安装webpack

打包：npx webpack ./src/index.js  -o ./dist/main.js
    如果全局安装了，就不需要加npx  如果没有全局安装，需要加上npx。

webpack优点

vue全家桶：vue.js + vue-router + vuex + es6 + vue-cli + webpack + ui库
传统开发项目就面临了一个问题：

• 资源太多，不好管理
• 资源与资源之间的引用关系太乱
• 项目上线时，把所有的资源都扔到服务器

webpack它就是一个打包器。webpak部分作用：

• 对代码进行压缩合并
• 把浏览器不能识别的代码，转成让浏览器识别
• 解决依赖关系

还有

• 自动发布
• 代码检验
• 自动刷新
  webpack是一个打包器。作用比较多，如：把代码进行压缩合并，解决项目代码依赖关系…
  缺点：过于庞大

webpack使用

npm  init  -y	先进行项目的初始化
npm i webpack webpack-cli --save-dev  开发时需要用，项目上线后，就不需要了
初始化之后安装
安装webpack:
    本地安装：npm i webpack webpack-cli
    全局安装：npm i webpack webpack-cli  -g

webpack不需要配置就可以使用，我们叫它零配置。默认情况下，webpack是零配置。

• webpack默认会把当前项目src目录下的文件进行打包编译，把src下面的index.js当成一个入口
• webpack会把打包好的代码放到dist目录下面

index.js 是项目的入口文件，vue脚手架创建的项目入口我文件是main.js.
项目的目录结构：

• src 项目开发目录 项目源吗 不会扔到服务器
• dist 编译后的文件（打包后文件）–> 将来是要发布到服务器上

导入导出

webpack是基于node的，走的是commonjs模块化，不是ES6。

commonjs：module.exports = { }
es6：import  模块 from 路径
import { sub } from "./B"  // ES6中的导入
const { add } = require("./A") // commonjs中的导入

导入模块使用 import 和 require 都行
目前在前端使用的是es6，在node中使用的是commonjs

零配置打包

通过webpack命令就可以打包,在控制台输入webpack时，报错了： webpack: command not found
原因：webpack并没有装到全局中

零配置打包：

• npx webpack： 如果全局中没有安装，它会把项目中安装的连接到全局中。每次更新文件需要重新打包
• 在package.json中配置一个命令 通过npm run xxx 也是OK
  当运行这个命令就等于运行 webpa 命令
  “scripts”: { “serve”: “webpack” },

npx:
你要使用webpack命令，你必须全局安装webpack
如果你不想全局安装，那么就可以使用npx
npx 默认会临时全局安装webpack

	打包：npx webpack ./src/index.js  -o ./dist/main.js
    如果全局安装了，就不需要加npx  如果没有全局安装，要加上npx。

webpack配置

零配置webpack，非常弱。学习webpack就是在学习一堆配置。
创建配置文件：
在项目的根目录下面，创建一个webpack.config.js，把所有的配置写在这个文件中。

在webpack.config.js中自定义webpack的配置，以后使用webpack命令打包时，就按照我们这个配置进行打包。这个文件叫，必须叫webpack.config.js 或 webpackfile.js

webpack本身就是基于node开发，所以它里面的模块化规范是commonjs规范。
node是后端，在后端并没有火起来，但是在前端火起来。

配置入口出口

//用到了path 模块，所以需要引入
const path = require('path')
module.exports={ 
//设置打包入口（真实项目开发，代码基本都在src下）
    entry:"./src/main.js",
//设置打包出口    
    output:{	//配置文件名
        filename:"main.js",
 //配置打包后的文件输出到什么位置，通常用绝对路径       
        path:path.resolve(__dirname,"dist")
    }
}

使用小结

1) 什么是webpack? webpack有什么用？
答：webpack是一个打包器。
		作用：把代码进行压缩合并，解决项目代码依赖关系....

2）打包分两种？
答：1）开发时进行打包（在内存） 2）项目开发完毕，需要在硬盘上打包 

3）wepack零配置？
答：只需要安装webpack和webpack-cli两个模块，通过webpack命令。
    如果说webpack是全局安装的，那么就直接使用这个命令就OK了，
    如果是本地安装的，可以使用如下两种方式使用webpack命令：
    1）npx webpack  
    2）在package.json中配置一个命令   通过npm run xxx 

4）我们学习webpck的目标？
答： 我们学习webpack最终的目标就是脱离vue或react脚手架，
	自己搭建一个vue或react的开发环境。

5）自己配置？
答：webpack可以配置的东西非常多，先看两个
    入口   src/main.js 
    出口   dist/build.js 

打包

打包（编译）模式，分两种：

• 1）开发模式打包（我们开发过程需要不断地打包（.vue文件浏览器不认识，就需要通过打包让浏览器认识））通常开发模式打包，是把包打包到内存（npm
  run serve 打好包了，包存在内存中，把内存中的包通过express托管起来，提供一个url，通过url访问内存中的项目）。
  至于如何在内存中打上一个包，通过一个url访问呢？先不说 .vue

• 2）生产模式打包（项目开发完毕了，就打包生成一个dist目录，dist目录就是我们项目要上线的文件夹）

   开发模式打包 打包出来的文件不会压缩 方便我们读取。  
   	开发模式打的包叫bundle.js 
   生产模式打包 代码都是压缩过的 上线时只可以减小体积。
   	生产模式打的包通常叫bundle.min.js 
  

怎么指定是开发模式打包，还是生产模式打包？
答：通过mode 值有两个 一个是development(开发) production（生产）
如果没有配置mode，默认就是生产模式。
这两种无论生产还是开发模式，都是打包到硬盘上
指定打包模式，在webpack.config.js中配置：

module.exports={
	//mode:"development", //采用开发模式打包（代码不压缩）
	mode:"production",	//生产模式打包，代码压缩
}

三套打包配置文件

根据不同的模式，可以写两套配置：

• 一套是针对开发模式的配置
• 一套是针对生模式的配置

生产模式相关配置：

const path = require("path");
module.exports = {
    mode:"production",
    entry:"./src/main.js",
    output:{
        filename:"bundle.[hash].js",  
        path:path.resolve(__dirname,"dist")
    }
}

开发同上

然后，可以在package.json中配置两个命令如下：

"scripts": {
    "serve": "webpack --config webpack.config.development.js",
    "build": "webpack --config webpack.config.production.js"
},

这样就可以使用npm run 名 运行
还可以把生产和开发相同的配置抽离出来，也就是说写三份配置：

1. 开发和生产中都有的配置
2. 开发相关的配置
3. 生产相关的配置

缓存

缓存问题：
第一次打包，生成一个bundle.js，在index.html引入bundle.js文件，页面加载，它会把bundle.js缓存到浏览器本地。这是浏览器的缓存机制。当我们又重新打包了，由于文件名还是bundle.js，浏览器就可能从缓存中获取，因为浏览器发现这个bundle.js，在浏览器的缓存中有，缓存中有，就走缓存。从缓存中获取上一次打包的结果。
解决缓存：
之所以有缓存是由于文件名或url名是一样的，只有一样了，浏览器才会偷懒，从缓存中获取资源，如果url名或文件名不一样，肯定不会走缓存，浏览器会当成一个新资源。
解决办法：打包时指定出口文件名每一次都不一样。
在webpack中有一个hash的东西：

filename:"bundle.[hash].js"
//[hash]打包都会随机在名字中生成唯一的哈希值
//保证每次打包出来的文件名都不一样

覆盖打包（重点）

现在我们面临这一样一个问题：

1. 打包生成的js，需要手动引入到index.html。有个插件帮忙自动插入：html-webpack-plugin
2. 第一次打包，都会生成一个新的文件，老文件没一点用了，但是还在，我们想能不能在打一个新包的时候，把老包都删除掉。是有这样一个插件的。叫：clean-webpack-plugin
3. 能不能直接打包到内存中，这样速度就非常快，通过一个服务器把内存中打好的包托管起来，通过一个url就可以访问内存中的项目，也是有一个模块，叫：webpack-dev-server
   打包

打包三个插件

html-webpack-plugin：

给一个模板，自动帮我们插入，不用手动引入
帮我们处理的就是对于html的编译和导入文件的自动处理

1. 根据一个html模板在内存中生成一个相同的html
2. 把内存中的打包好的js插入到内存中Html最后面

clean-webpack-plugin：

把之前老的打包好的模块删除掉，仅仅留下最新打包的

webpack-dev-server:

作用：开发模式下，直接在内存中打包，速度快，使用epxress服务器托管起来，直接访问内存中的项目。
自动监听代码是否改变了，如果代码改变了，自动在内存中打包。
帮我们自己打开浏览器

小结打包流程（重难点）

将三个插件，安装成开发依赖，开发依赖 -D

npm i html-webpack-plugin clean-webpack-plugin webpack-dev-server -D 

最终要在内存中打包好一个js模块，这个模块要插入到html中，可以使用html-webpack-plugin可以根据模板生成一个内存中的html文件，然后把内存中的js文件插入到内存中的html文件中。

所以我们只需要指定一个html模板就行，因为html-webpack-plugin会根据模板在内存中生成一个html。webpack-dev-server就可以帮我们在内存中打包一个js文件（内存中是看不到的，硬盘可以看到）。html-webpack-plugin又可以把内存中的js插入到内存中的html。

只需要找一个文件（public）创建index.html 模板文件。在里面指定模板 <div id="app"></div> ，在内存打包后，会再模板下面自动插入打包好的js <script src=""></script>

webpack-dev-server打包一个js扔到内存中，html-webpack-plugin会根据模板在内存中生成一个叫index的html问文件，html-webpack-plugin还会把webpack-dev-server生成的js文件插入到index。最后会把打包好的html和js通过express托管起来，然后暴露一个URL，通过URL就可以访问内存中的资源了。

vue脚手架：
脚手架创建了一个项目，项目里面有个public文件，public文件下面有个index.html，这个index.html是硬盘上的index.html。vue脚手架创建的项目有个入口文件main.js，通过npm run serve 可以运行项目。
npm run serve 做的事情：1.把src下面的资源进行打包，打包后扔到内存里面，内存里面就放了打包好的东西。内存里面还有一个index.html，这个index.html是通过一个插件和模板在内存里面生成的。把生成好的js插入到内存里的index.html中。
这个html就是一个文件，通过express托管起来，暴露了一个地址，通过地址访问内存里面的项目。

配置

在webpack.config.js中配置：

html-webpack-plugin

需要new，才能使用

//引入
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
plugins:[  // webpack中的plugins是一个数组，里面可以配置很多的插件
   new htmlWebpackPlugin({  // 插件需要new一下
        // 指定模板的位置
        template:"./public/index.html",
        // 打包生成的文件名  localhost:8080/
        filename:"index.html",
        // 是否把打包好的资源插入到页面中，是否设置hash值（作用是清缓存）
        // 和上面output中的filename中配置的hash值的作用是一样的
        hash:true,
        minify:{
            removeComments: true,  // 在内存中html中就没有注释 
            collapseWhitespace:true, // 清理html中的空格、换行符，一行
            minifyCSS:true, // 压缩内部css样式，一行
            removeEmptyElements:true, // 清除掉空标签，慎用
            // .... 
        }
    }),
    // 第一次打包把之前打过的包清空掉
    new CleanWebpackPlugin()
    ]
}

htmlWebpackPlugin 根据硬盘html生成新的内存html，新的内存html自动引入打包好的js，不需要每次手动引入了。
minify的主要作用就是对内存中的index.html进行相关的配置，指定和模板的index.htm的区别。

clean-webpack-plugin

需要new，才能使用

//这个必须要解构
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    plugins:[  //每次打包都把上次的包清除
        new CleanWebpackPlugin(),
    ],
}    

webpack-dev-server

安装完后直接使用，不需要引入。
package.json中配置：

  "scripts": {	
    "serve": "webpack-dev-server", /npm run serve/打包到内存中
    //上面的不是全局装的，npx运行
    "build": "webpack"  //npm run build 打包到硬盘中
  },

webpack.config.js 配置
安装完后直接使用，不需要引入。

module.exports = {
// 配置webapck-dev-server
    devServer:{
        port:"8080", // 托管内存中的包的端口  
        compress:true, // 开启gzip压缩
        open:true,  // 自动打开浏览器
        contentBase:path.resolve(__dirname,"dist"), // 指定资源的访问路径
        hot:true, // 开启热更新
        // 配置代理跨域   如果后端没有配置cors  写vue项目可以在devServer中配置代理跨域
    },
}   

CSS

src/static/css
通常css写在什么地方：

1. 在html文件中写入
2. 写在css文件中
3. 在spa应用中，我们是在入口中引入css

在工程化项目中 css不是在Html中导入 通常也是在js入口中导入
在入口js导入了css文件，报错了，为什么？
答：默认情况下，webpack不能识别css代码。
想让webpack处理css代码，那么需要使用loader（加载器）把css代码转化可以让webapck识别的代码。

loader:style-loader、css-loader

loader就是一个翻译官，可以把webpack不识别的代码翻译成webpack可以识别的代码。
针对不同的文件类型，有不同的loader，对于css处理，有两个loader,一个是style-loader， 一个是css-loader。

loader也是第三方模块，使用时，需要安装

npm i css-loader style-loader -D 

只有开发时，才会使用到这些loader，项目要上线的，打包完后的代码就是html,css,js进行压缩。体积变小。
如写代码使用less写时，那需要使用less-loader把less代码转化成css代码。项目上线，less-loader就不需要了，所以安装的时候，是安装成开发依赖。

loader安装完后，需要在webpack.config.js中配置

module:{  // 配置加载器--loader
        rules:[  // 模块规则：使用加载器（默认是从右向左执行，从下向上）
            {	//
                test:/\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    }

css-loader的作用：把css代码转化成可以让webpack识别的代码。
style-loader的作用：接收css-loader处理的结果，把css插入到head标签中。

less-loader

如果写了less代码，webpack默认也是不认识的，需要一个合适的loader来处理。
loader就是翻译官，由于我们面面配置了css-loader，所以只需要把less代码翻译成css代码。
怎么把一个less代码转成css代码？
答：通过less-loader就可以转化。

安装less-loader，随便安装一下less，如下：

npm i less less-loader -D 

然后配置less

module:{  // 配置加载器--loader
    rules:[  // 模块规则：使用加载器（默认是从右向左执行，从下向上）
        {
            test:/\.(css|less)$/i,  
            use:["style-loader","css-loader","less-loader"]
        }
    ]
}

同理：如果你使用sass来写样式，webpack也是不认识的，你也需要通过laoder进行处理。如果你使用stylus来写样式，也是一样的。

postcss-loader

postcss-loader，用来给css3中属性添加前缀的。
css3中的属性为了兼容性，通常需要前缀，可以使用postcss-loader，自动帮我们
添加前缀，也就是说我们只需要写一次css3属性，打包时，它会自动帮我们加上前缀。
安装：

npm i postcss-loader autoprefixer -D 

autoprefixer是postcss-loader的插件
postcss-loader 处理css的loader

module:{  // 配置加载器--loader
    rules:[  // 模块规则：使用加载器（默认是从右向左执行，从下向上）
        {
            test:/\.(css|less)$/i,  
            use:[
            "style-loader",	 //把css代码插入到head标签中
            "css-loader", //翻译成让webpack识别的代码
            "postcss-loader", //设置css3属性中的前缀（处理兼容，需要搭配autoprefixer使用）
            "less-loader", //吧less代码翻译成css代码
            	 //{	等同于上面的，可以配置多个属性
                 //       loader:"less-loader",
                 //       options:{	}
            	 //}
            ]
        }
    ]
}

针对postcss-loader，这个loader还有很多插件，autoprefixer就是postcss-loader的插件。我们需要专门创建postcss.config.js进行配置，在这个js文件中引入你要使用的插件。比如各种浏览器版本使用…
postcss-loader+小插件 css3属性加前缀。

抽离css

上面的配置，是把css处理成了内部样式，但是我们项目中通常是抽离成外部样式，vue脚手架，它通过npm run build打包出来的就是一个css文件夹，也就是把css抽离出去了。

怎么抽离？

答：npm i mini-css-extract-plugin -D  

• js
• css
• images
• index.html

web的三层结构

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//zai plugins:中配置
new MiniCssExtractPlugin({
    filename: '[name].[hash].min.css',
}),

use:[	//不能使用"style-loader"，要使用专属的loader
    MiniCssExtractPlugin.loader,  
    "css-loader",  
    "postcss-loader", 
    "less-loader"
]

webpack总结

webpack也是属于vue技术栈，现在开发项目，基本上离不开webpack。

webpack不是框架了，也不是库，仅仅是一个打包工具。vue中脚手架是基于webpack的，react中的脚手架也是基于webpack。

之所以需要webpack，是因为项目中有很多的资源，资源之间有很多的关系，对项目中的资源进行压缩合并，依赖关系进行整理，就比较方便

使用webpack，默认情况下，webpack是零配置。webpack默认会把当前项目src目录下的文件进行打包编译，把src下面的index.js当成一个入口，webpack会把打包好的代码放到dist目录下面，项目上线dist要扔到服务器中。

自己配置，在项目的根目录下面，创建webpack.config.js写配置。

通过vue脚手架创建的项目没有webpack.config.js，是因为vuecli2.x版本中是有这个配置文件，在vuecli3.x 4.x中隐藏了这个配置文件。如果想基于vuecli的配置上再进行配置，可以创建一个vue.config.js。 打包的时候，它会把vue.config.js中的配置合并到它内部的webpack.config.js中去。通常在vue.config.js中配置跨域

开发模式打包是让一些浏览器不能识别的打包成能识别的。生产模式打包是项目结束时打包成要上线的dist目录

为了解决打包缓存问题，可以打包是带上hash，filename:“bundle.[hash].js”, 这样每一次生成的打包后文件名就不一样了。

可以把生产和开发以及相同的配置抽离出来，也就是说写三份配置：
通过webpack命令webpack通过把打包好的代码生成到硬盘上的。

html-webpack-plugin：

1. 根据一个html模板在内存中生成一个相同的html
2. 把内存中的打包好的js插入到内存中Html最后面

clean-webpack-plugin：

• 把之前老的打包好的模块删除掉，仅仅留下最新打包的。

webpack-dev-server:

• 开发模式下，直接在内存中打包，速度快，使用epxress服务器托管起来，直接访问内存中的项目。
  vue中代理跨域也是基于这个webpack-dev-server

使用webpack处理css，需要加载器loader，进行翻译。从下往上看进行处理。

1. style-loader的作用：接收css-loader处理的结果，把css插入到head标签中。
2. css-loader的作用：把css代码转化成可以让webpack识别的代码。
3. less-loader的作用：把less代码转成css代码

postcss-loader：给css3中属性自动添加前缀的，需要创建postcss.config.js并配置引用。

css抽离，上面是把css处理成内部样式，需要抽理成外部样式，npm i mini-css-extract-plugin -D

压缩css和js

压缩css:optimize-css-assets-webpack-plugin
压缩js:uglifyjs-webpack-plugin

使用production模式（生产），默认情况下，就把js压缩了，但是你如果使用optimize-css-assets-webpack-plugin压缩了css。那么即使在production模式，js也不压缩，需要通过uglifyjs-webpack-plugin。

安装： npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

webpack其他配置

图片

项目中什么时候用到图片：

• html中< img >
• css中背景图
• js中也可以创建一个图片 Image() let img = new Image() img.src = “xxx”

webapck处理图片：

• 默认情况下，webpack不能处理图片，靠loader。
  file-loader
  url-loader url-loader是比file-loader强一点loader

安装：npm i file-loader url-laoader -D

webapck到底认识什么？
答：默认情况下，它只认识低级的js代码。 高级一点的js代码就处理不了，如class，let [a,b] = [1,2]…

file-loader 和 url-loader 不同？
url-loader比file强大。
使用url-loader可以把图片转成base64编码（字符串）

module：{
  rules:[
    //{
    //  test:/\.(jpg|png|gif|webp|ico)$/i,
    //  use:["file-loader"]  // 不管图片大小，都是原样输出
    //},
    {	//配置图片,小图转化为字符串，大图原样输出
    test:/\.(jpg|png|gif|webp|ico)$/i, // 使用urlloader可以把图片转成字符串
    use:{
        loader:"url-loader",  
        options:{
            limit:38*1024  
// 如果图片小于38k，就把图片转成base64编码,如果大于38k,就原样输出
	        }
	    }
	},
	{	//配置字体图标
	    test:/\.(svg|ttf|eot|woff2)$/i,
	    use:["url-loader"]
	},
	{	//配置音频
	    test:/\.(mp3|ogg|wav)$/i,
	    use:["url-loader"]
	},
	{	//配置视频
	    test:/\.(mp4|avi|ogv)$/i,
	    use:["url-loader"]
	},
	{	配置vue，要自己配置vue需要配置大量的loader，世界中
	    test:/\.vue)$/i,
	    use:["vue-loader"]
	}
  ]
}

配置代码

/* 
    在webpack.config.js中自定义webpack的配置，以后使用webpack命令打包时，就按照我们这个
    配置进行打包。这个文件叫，必须叫webpack.config.js 或 webpackfile.js

    webpack本身就是基于node开发，所以它里面的模块化规范是commonjs规范。

    node是后端，在后端并没有火起来，但是在前端火起来。
 */
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');  // 压缩js  
//如果你压缩了css 即使在生产模式下 js它不会压缩了 需要我们手动压缩

module.exports = {
    mode:"development", // 采用开发模式打包（代码不压缩） 
    // mode:"production", // 生产模式打包，代码是压缩的
    // 设置要打包的入口（真实项目开发，代码基本上都是放在src下面的）
    entry:"./src/main.js",
    // 配置打包后的出口
    output:{
        // 配置文件名  
        filename:"bundle.[hash].js",  
  // [hash]打包的时候会随机在名字中生成唯一的哈希值，保证每一次打包出来的文件是不一样的
        // 配置打包后的文件输出到什么位置 通常使用绝对路径
        path:path.resolve(__dirname,"dist")
    },
    // 配置webapck-dev-server
    devServer:{
        port:"8080", // 托管内存中的包的端口  
        compress:true, // 开启gzip压缩
        open:true,  // 自动打开浏览器
        contentBase:path.resolve(__dirname,"dist"), // 指定资源的访问路径
        hot:true, // 开启热更新
 // 配置代理跨域   如果后端没有配置cors vue项目可以在devServer中配置代理跨域
    },
    plugins:[  // webpack中的plugins是一个数组，里面可以配置很多的插件
    //根据模板生成一个html，把打包后的东西自动插入到html中
        new htmlWebpackPlugin({  // 插件需要new一下
            // 指定模板的位置
            template:"./public/index.html",
            // 打包生成的文件名  localhost:8080/
            filename:"index.html",
            // 是否把打包好的资源插入到页面中，是否设置hash值（作用是清缓存）
            // 和上面output中的filename中配置的hash值的作用是一样的
            hash:true,
            minify:{
                removeComments: true,  // 在内存中html中就没有注释 
                collapseWhitespace:true, // 清理html中的空格、换行符
                minifyCSS:true, // 压缩内部样式
                // removeEmptyElements:true, // 清除掉空标签
                // .... 
            }
        }),
        // 第一次打包把之前打过的包清空掉
        new CleanWebpackPlugin(),
        //把css抽离出去
        new MiniCssExtractPlugin({
            filename: '[name].[hash].min.css',
        }),
    ],
    module:{  // 配置加载器--loader
        rules:[  // 模块规则：使用加载器（默认是从右向左执行，从下向上）
            {
                test:/\.(css|less)$/i,  // js中的正则表达式  
                use:[
                    // "style-loader",  // 把css代码插入到head标签中  
                    MiniCssExtractPlugin.loader, 
       // MiniCssExtractPlugin插件中自带loader 这个loader可以把css抽离出去
                    "css-loader",  // 翻译成让webapck识别的代码
                    "postcss-loader", 
     // 设置css3属性中的中前缀(处理兼容 需要搭配autoprefixer使用) 
                    // "less-loader", // 把less代码翻译成css代码
                    {
                        loader:"less-loader",
                        options:{
                            // 专门针对less-loader进行配置
                        }
                    }
                ]
            },
            // {
			//     test:/\.(jpg|png|gif|webp|ico)$/i,
			//     use:["file-loader"]  // 不管图片大小，都是原样输出
			// },
			{
			    test:/\.(jpg|png|gif|webp|ico)$/i,  
			    // 使用urlloader可以把图片转成字符串
			    use:{
			        loader:"url-loader",  
			        options:{
			            limit:38*1024  
		 // 如果图片小于38k，就把图片转成base64编码,如果大于38k,就原样输出
			        }
			    }
			},
			{
			    test:/\.(svg|ttf|eot|woff2)$/i,
			    use:["url-loader"]
			},
			{
			    test:/\.(mp3|ogg|wav)$/i,
			    use:["url-loader"]
			},
			{
			    test:/\.(mp4|avi|ogv)$/i,
			    use:["url-loader"]
			},
			{
			    test:/\.vue)$/i,
			    use:["vue-loader"]
			}  
        ]
    },
   optimization:{ // 设置优化项
        minimizer: [  // 设置压缩方式
            new OptimizeCSSAssetsPlugin(), // 压缩css 
            // 注意 如果你压缩了css  js它就不压缩
            new UglifyJsPlugin({   // 压缩js
                cache: true,  // 是否使用缓存
                parallel: true,  // 是否是并发编译 
                sourceMap: true // 是否启动源码映射 （方便调试）
            }),
        ]
    } 
}

package.json

  "scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack",
  },

webpack：打包器，生成dist目录，下面生成硬盘上的打包好的文件。修改需要手动更新，不会实时更新。
webpack-dev-server：一个服务器插件，启动一个web服务并实时更新修改，目录中看不到文件，文件在内存中。