一、webpack打包JS文件
注意：一定要先下载Node.js，webpack 必须在 NodeJS 下运行
如未下载则可从Vue——安装@vue/cli(Vue脚手架)的三种方式 进行查看并下载
首先呢先随便选个盘创建一个文件夹为webpack（名字可以自己定义），在文件夹中添加两个新文件夹scr以及dist
按住win+r输入cmd调出控制台，输入正确路径
然后进行初始化：npm init
然后一直回车 ，直到重新出现目录
会发现多了个json文件
之后输入：
全局安装： npm i webpack webpack-cli -g 本地安装： npm i webpack webpack-cli -D
安装完成后会发现目录中多个文件夹
在src文件夹中创建两个新的js文件
1.新建入口文件index.js和mathUtils.js，index.js是依赖于mathUtils.js
mathUtils.js代码部分如下：
//1.新建mathUtils.js，用CommonJs规范导出 function add(num1,num2) { return num1+num2 } function mul(num1,num2) { return num1*num2 } module.exports = { add,mul }
index.js代码部分如下：
//2.新建入口js文件index.js 导入mathUtil.js文件，并调用 const {add,mul} = require("./mathUtils.js") console.log(add(10,20)) console.log(mul(10,10))
完成后看下图：
2、然后使用webpack命令打包js文件
注意：webpack3使用下面的命令！！！
webpack ./src/index.js ./dist/bundle.js webpack4及以上，使用cmd输入以下命令！！！ webpack ./src/index.js -o ./dist/bundle.js
这里报红，可以换一种写法
找到所在目录，并删除bundle.js文件夹
然后输入以下命令：
如果是开发版就用开发环境： webpack ./src/index.js -o ./dist --mode=development 如果是用生产环境就使用这串代码： webpack ./src/index.js -o ./dist --mode=production
!! 我们这里使用生产环境
报绿即可。这样就会发现刚刚删除的地方只有一个main.js文件
这时就可以新建一个页面进行测试了：
在dist文件夹中创建一个index.html页面，把main.js引入即可
运行页面：
即可看到已经成功
二、打包JSON文件
第一种打包方法
例如：在src文件夹中新建一个data.json文件，并对其输入一些json的语法
然后在src文件夹中的index.js里写入 import data from "./data.json" 并打印data ： console.log(data);
重新打包一下即可：
webpack ./src/index.js -o ./dist --mode=production
此处就已经完成webpack的打包。
第二种打包方法：webpack打包
直接简写成这样也可以打包
webpack可以帮我们打包js文件，只要指定入口文件（index.js）和输出的文件（bundle.js），不管是es6的模块化还是CommonJs的模块化，webpack都可以帮我们打包，还可以帮我们处理模块之间的依赖。
如果觉得--mode=development麻烦可以配置webpack.config.js的时候如下写
第三种打包方法：创建webpack.config.js
在最外层新建一个webpack.config.js文件
写入：
代码如下：
const path = require('path'); module.exports = { entry: './src/index.js', //入口文件 output: { path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径 filename: 'main.js', //打包后的文件名 }, mode:'development' }
cmd输入：
webpack
打印效果如下：
第四种打包方法：使用自定义脚本（script）启动 ****（重要）
这里有两个生产环境
1、npm run dev//开发环境
2、npm run build//生产环境
这里使用生产环境也就是 npm run build
在package.json中的scripts中加上
"build": "webpack"
使用npm run build进行打包
npm run build
再次输入：
下面说一下如何打包css文件
三、打包css文件使用webpack的loader
什么是loader
loader是webpack中一个非常核心的概念。
webpack可以将js、图片、css处理打包，但是对于webpack本身是不能处理css、图片、ES6转ES5等。
此时就需要webpack的扩展，使用对应的loader就可以。
loader使用
步骤一：通过npm安装需要使用的loader
步骤二：通过webpack.config.js中的modules关键字下进行配置
大部分loader可以在webpack的官网找到对应的配置。
创建一个css文件：
引入链接：
在cmd中输入命令：
npm run build
安装使用style-loader 以及 css-loader
npm install --save-dev style-loader css-loader
并在配置中添加loader
代码如下：
module: { rules: [ { test: /\.css$/,//正则表达式匹配css文件 //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]//使用loader } ] }
这时重新加载命令即可：
webpack使用多个loader是从右往左解析的，所以需要将css-loader放在style-loader右边，先加载后解析。
此时样式成加载解析到DOM元素上。
完整效果：
四、对less文件进行打包
vscode不能直接对less进行解析，如需解析css则去下载插件easy less
1、新建less文件
2、引入less
3、安装less-loader
npm install --save-dev less-loader less
4、在webpack.config.js中使用less-loader
module: { rules: [ { test: /\.less$/,//正则表达式匹配css文件 //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader'//less文件loader }]//使用loader } ] }
如果css和less都需要打包则写下述代码即可：
module: { rules: [{ test: [/\.css$/i, /\.less$/], //正则表达式匹配css文件 //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' //less文件loader }] //使用loader//使用loader }] }
也可以写成：
module: { rules: [ { test:[ /\.css$/i,/\.less$/], use: ['style-loader', 'css-loader','less-loader'], }, ], },
如下图：
5、执行npm run build
显示效果
五、打包背景图片
准备工作，准备两张图片，图片大小为一张8KB以下（名称为small.jpg），一张大于8KB（名称为big.jpg），新建一个img文件夹将两张图片放入。
1、这里在src中新建文件夹img，并把图片放在img文件夹中。并创建了一个css文件夹，将之前的css文件放入其中
2、将背景图片引入normal.css文件里：
3、其对应修改为
4、在webpack.config.js中添加以下代码：
{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', generator: { filename: 'images/[hash][ext][query]' }//把打包的图片放到images文件夹 }, 或者 module.exports = { mode: 'development', entry: './src/index.js', //入口文件 output: { path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径 filename: 'bundle.js', //打包后的文件名 assetModuleFilename: 'images/[hash:8][ext][query]' //把打包的图片放到images文件夹 // hash:8是把图片编译为八位数的哈希值 },
这里使用了第一种方法：
再次输入命令
npm run build
这时就已经完成了打包，回到编辑器中查看，会发现多了个打包好的img里面是图片
再次打开index.html，
显示效果如下：
打包完成！
还有一种比较老的方法
安装使用url-loader处理图片
url-loader像 file loader 一样工作，但如果文件小于限制，可以返回 data URL 。（通常用于处理小图片）
npm install --save-dev url-loader
安装使用file-loader处理大图片
npm install --save-dev file-loader
然后对webpack.confid.js进行配置
{ test: /\.(png|jpg|gif)$/i, //匹配png/jpg/gif格式图片 use: [{ loader: 'url-loader', options: { limit: 8192, //图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader esModule: false, //解决es6语法不识别 name: 'img/[name].[hash].[ext]', } }], type: 'javascript/auto' }
index.html一定要和下面的 webpack.config.js导出路径一致！！！！
此时还需在src中新建一个index.html页面
然后运行：
npm run build
即可成功
如果图片设置的为8KB以上的图片在dist中添加JS文件夹以及img文件夹
显示效果：
如果为8KB及以下的图片则只会出现一个JS文件，因为把img图片压缩在了JS文件夹下的main.js中
可以看到dist中并没有img文件夹在浏览器中打开会发现图片的格式已经被更改
图片转换成base64格式的优缺点
1. 优点
（1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；
（2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
（3）base64编码的字符串，更适合不同平台、不同语言的传输；
（4）算法是编码, 不是压缩, 编码后只会增加字节数，但是算法简单, 几乎不会影响效率，算法可逆, 解码很方便, 不用于私密信息通信;
（5）解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;
2. 缺点
（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。
下面再说一下打包字体和HTML
六、打包Font字体样式以及HTML
先从阿里巴巴字体图库中下载到本地
阿里巴巴矢量图标库
选择已下载好的图标进行下载到本地
下载完成后有个文件夹
打开过后把框起来的文件放入src中的css文件夹以及新建的fonts文件夹
更改iconfont.css中的路径：
引入文件路径：
在src中添加一个index.html文件（之前忘了说，这里给补上） 并写入字体样式以及类名
使用cmd输入以下命令 来安装插件
npm install --save-dev html-webpack-plugin
再webpack.config.js中添加以下代码
const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
打包资源：
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'fonts/[hash][ext][query]' } },
打包完成后如下如所示：
删除dist文件夹中的所有文件或者直接删除dist即可
再次运行
npm run build
完成后会自动生成之前删掉的所有文件
效果如下：
七、devsever
npm install webpack-dev-server --save-dev devServer: { // 项目构建后路径 // contentBase: resolve(__dirname, 'build'), // 启动gzip压缩 compress: true, // 端口号 port: 3000, // 自动打开浏览器 open: true, }, mode: 'development' }
运行
npx webpack-dev-server
第一次进行yes以及y
运行结束后会自动为你打开浏览器并进行实时渲染
接下来就可以测试一下更改css样式时浏览器会不会发生变化
这里发现打包完这么多后并没有单独打包css文件夹（如下图），所以接下来将进行生产环境配置
八、webpack生产环境配置
安装
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin= require('mini-css-extract-plugin')//提取css成单独文件
在plugins中添加
new MiniCssExtractPlugin()
并使用MiniCssExtractPlugin.loader替换use里的'style-loader'，
MiniCssExtractPlugin.loader
运行npm run build
下图中会发现这里有个了css文件，但是并没有css文件夹
这时需在new MiniCssExtractPlugin()中添加以下代码
{ filename:'css/build.css' // 创建的文件夹以及css文件的名称 })
并且把刚刚的main.css给删除
再次进行打包：
可以看到已经成功创建
打开index.html也会正常显示
*九、css兼容性写法
这里主要是针对浏览器兼容样式的打包，例如（display:-webkit-flex样式），现在一般都支持ie9以上版本，基本用不到这一写法，但还是演示一下
首先先设置一下兼容样式
安装
npm install --save-dev postcss-loader postcss
记住：一定不要不能出现注释 ，出现注释就会报错
代码如下：
"browserslist":{ "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.02%", "not dead", "not op_mini all" ] }
之后在webpack.config.js中添加以下代码
代码如下：
安装：npm install postcss-preset-env { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'postcss-preset-env', //这个需要安装npm install postcss-preset-env否则不能生效 { // 其他选项 }, ], ], }, }, },
进行打包
npm run build
打包后会发现两个错误原因是less文件中没有把注释给去掉
所以这里要把less中的注释去掉即可
再次打包：
npm run build
效果如下：
这里补充一点，上面忘了说。
十、html里的img标签里的图片如何打包
在webpack.config.js中添加以下代码：
{ test: /\.html$/i, loader: "html-loader", },
记得安装插件
npm install --save-dev html-loader
最后进行打包即可：
npm run build
