webpack初学笔记

学习链接: https://www.bilibili.com/video/BV1YU4y1g745
还没看完呢。

安装

一般不适用全局安装

//先安装个npm包管理配置文件
npm init -y

↑ 运行完毕后，会出现package.json文件

//在对webpack进行项目局部安装
npx webpack webpack-cli --save-dev

打包？

在需要打包的文件夹路径下输入:

npx webpack

随后会出现 /dist 文件，该文件下会出现默认打包文件main.js

配置

在命令行中设置配置太不方便啦，所以！
在项目根目录下创建一个配置文件webpack.config.js

//webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js", //入口文件
  output: {
    filename: "bundle.js", //指定输出名
    path: path.resolve(__dirname, "./dist"), //输出路径-需要设置成绝对路径 
     //path.resolve(__dirname)指向 当前所在的物理路径
  },
  mode: "none",
};

随后进行一个打包的动作即可。

使用

<!-- index.html -->
……
<script src="./dist/bundle.js"></script>
……

---

使用插件

//webpack.config.js
//声明常量
const HtmlWebpackPlugin = reguire("html-webpack-plugin");

module.exports = {
……
//插件声明
plugins:[
new HtmlWebpackPlugin(),
]

……
}

html-webpack-plugin

使用该插件进行打包，会自动在html导入js文件（添加script标签）

npm install html-webpack-plugin -D

-。-在根目录下进行安装

• 配置

……
plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",//以该文件为基础模板
      filename: "app.html",//生成的文件名
      inject: "body",//script标签位于body中
    }),
  ],
  ……

每次打包后对上一次打包的文件进行清理，仅需在output中添加clean:true即可

inline-source-map

解决：在js文件中出现错误，能够直观显示出错行数

//webpack.config.js
……
mode:"development",//设置为开发者模式，js文件便于查看
devtool:"inline-source-map",
……

webpack-dev-server

就Live Server的效果。

npm install webpack-dev-server -D

-。-在根目录下进行安装

//webpack.config.js
module.exports = { 
……
devServer:{
	static:"./dist",//根目录
},
}

mini-css-extract-plugin

用于抽离css。
建议先瞟一眼loader，再看以下代码。

npm install mini-css-extract-plugin -D

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports={
	……
	module:{
		plugins:[
			new MiniCssExtractPlugin({
	    	  filename: "styles/[contenthash].css",
	      	}),
	    ],
		rules:[
			{
			test:'/\.css$/,
			use:[MiniCssExtractPlugin.loader,"css-loader"];
			}
		]
	}
}

css-minimizer-webpack-plugin

用于压缩css。

npm install css-minimizer-webpack-plugin -D

//webpack.config.js
const CssMinimizerPlugin - require('css-minimizer-webpack-plugin');
module.exports = {
……
mode:"production",
……
optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
}

资源

Resource资源

用于发送文件，并导出url。

假设需要打包一张image

//webpack.config.js
module.exports = {
……
output:{
……
//指定图片打包后的路径&&名称①
assetModuleFilename:"images/[contenthash][ext]",
//[contenthash]-根据图片描述生成名称
//[ext]-自动生成扩展名
}
……
	module: {
	    rules: [
	      {
	        test: /\.png$/,
	        type: "asset/resource",//类型
	        //指定图片打包后的路径&&名称②
	        generator: {
         	 filename: "images/test.png",
       		 },
	      },
	    ],
	  },
 }

//注：以上代码块中①②都可以用于指定路径和名称。如果同时存在，则②的优先级比①大。

//index.js
import imgsrc from "./assets/1.png";
const img = doucument.createElement("img");
img.src=imgsrc;
document.body,appendChild(img);

inline资源

用于导出资源的data url。

//webpack.config.js
  rules: [
	      {
	        test: /\.svg$/,
	        type: "asset/inline",//类型
	        }
	 ]

source

用于导出资源的源代码。

//webpack.config.js
  rules: [
	      {
	        test: /\.txt$/,
	        type: "asset/source",//类型
	        }
	 ]

asset通用

自动选择Resource或inline类型。
*默认当资源文件＞8k时，选择Resource生成一个文件，否则只生成一个data url。

如何设置选择类型的临界值？

//webpack.config.js
 {
        test: /\.jpg$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024,//将临界值设置为4M
          },
        },
  },

loader

用于对模块的源代码进行转换。（css、字体、图像、xml……

安装：

npm install style-loader -D
npm install css-loader -D

使用：

//webpack.config.js
module.exports={
……
	module:{
		rules:[
			{
			test:/\.（css|less)$/,
			use:['style-loader','css-loader','less-loader'],//加载顺序：从后往前
			}
		]
	}

}