webpack中webpack.config.js === Plugins

plugins：

plugins： 扩展 webpack 本身的一些功能，
它们会运行在各种模块解析完成以后的打包编译阶段，
比如对解析后的模块文件进行压缩等
（通俗点说就是他是用来扩展webpack本身的）

loaders：loader是文件加载器，能够加载资源文件，
并对这些文件进行一些处理，诸如编译、压缩等，
最终一起打包到指定的文件中
（通俗点说就是用来转换器 eg：将A.scss转换为A.css）

注意：版本问题
比如：

plugins：

html-webpack-plugin ： 他会在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中

1. 安装

    命令 npm install --save-dev html-webpack-plugin
   

2. 在webpack.config.js文件中配置

//第一步先引入
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports={mode:'production',entry: './src/index.js',//第二步 设置它plugins: [new HtmlWebpackPlugin({//这给title是在浏览器上的名字 请看下图title: "My App",//打包后文件的名字filename: "app.html",//打包文件原来的路径template: "./public/index.html"})]}

把上面代码块中的title打印出来

<title><%=htmlWebpackPlugin.options.title%></title>

效果图

3. 打包
   打包完后会在dist中出现一个app.html
   如下图
   

clean-webpack-plugin：他会在打包之前把之前打包的文件给删除掉

1. 安装

    npm install --save-dev clean-webpack-plugin
   

2. 在webpack.config.js中配置

const HtmlWebpackPlugin = require("html-webpack-plugin");const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports={mode:'production',entry: './src/index.js',plugins: [new HtmlWebpackPlugin({title: "My App",//打包后文件的名字filename: "app.html",//打包文件原来的路径template: "./public/index.html"}) ,new CleanWebpackPlugin(),],}

看下图解释

mini-css-extract-plugin 他相当与把loader中的style-loader给代替了

1. 安装 ：mini-css-extract-plugin

   npm install --save-dev mini-css-extract-plugin
   

   安装：css

   npm install css-loader
   

2. 创建css文件
   

3. 在webpack.config.js中配置

//配置文件
const HtmlWebpackPlugin = require("html-webpack-plugin");const { CleanWebpackPlugin } = require('clean-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={mode:'production',entry: './src/index.js',module:{rules:[{test:/\.css$/i,use:[//从后往前执行的  先执行的是css-loader 再执行的MiniCssExtractPlugin.loader{loader: MiniCssExtractPlugin.loader},{loader:'css-loader'},]}]},plugins: [new HtmlWebpackPlugin({title: "My App",//打包后文件的名字filename: "app.html",//打包文件原来的路径template: "./public/index.html"}) ,// new CleanWebpackPlugin(),new MiniCssExtractPlugin({// 打包到文件中的路径filename: './public/css/app.css'}),],
}

如有不懂看下图解释

WebpackDevServer ：每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，WebpackDevServer 可以改善这个问题

• 他的作用在于可以通过刷新页面来把你修改的东西给显示出来

1. 先安装 WebpackDevServer

    npm install --save-dev webpack-dev-server
   

2. 因为他是一个服务得去启动所以为了方便我们去package.json中配置一下

  "scripts": {"server": "webpack server"},

3. 再去webpack.config.js文件中配置

     devServer: {// 生成的虚拟目录路径contentBase: "./dist",//他会在http://localhost:8080/app.html，也加上打开页面的名字openPage:'app.html',//自动打开时所在的页面index:'app.html',// 自动开启浏览器open: true,//开启热更新（数据实时更新不用重新在输入命令开一遍 刷新就可以更新你）hot:true,// //即使HNR（热更新）不生效，也可以不刷新整个页面（选择开启）// hotOnly:true,// 端口port: 8080}

4. 启动

    命令 ：npm  run server
   

5. 启动之后他会自动给你弹出一个页面如下图
   

• 提示：启动服务以后，webpack 不在会把打包后的文件生成到硬盘真实目录中了，而是直接存在了内存中(同时虚拟了一个存放目录路径)，后期更新编译打包和访问速度大大提升

sourceMap

• webpack大包所生成的代码并不利于我们的调试和错误定位（因为他是再一行的），我们可以通过 sourceMap 来解决这个问题

1. 首先他编译后会为每一个编译文件（除html文件）生成一个对应的 .map 文件，同时在编译文件中添加一段对应的 map 文件引入代码

//# sourceMappingURL=xx.js.map

如图

2. 使用他只需要在webpack.config.js 配置devtool: ‘source-map’,即可使用

module.exports = {mode: 'production',devtool: 'source-map',...
}

你会发现你的map文件中是这样的

总结：
plugins：就是用来对webpack本身进行扩展的

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！