webpack小概念&&webpack插件总结

在webpack中，只能读取javascript和json文件，那么我们项目中的css，img等等在打包构建的时候怎么办呢？

webpack给我们提供了一个loader模块去处理，它可以让webpack去处理其他类型的文件然后转为可被读取的有效模块，让程序正常运行~

当使用loader模块处理之后，你发现每一次打包都需要重复进行某些操作。
例如：每次打包都生成不同的dist目录，而你就只是需要最新的那一个dist文件，这个时候，我们就需要插件（plugin）来帮我们做一些处理了。（vue脚手架同样帮我们做了相对应处理）

插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
上面这句话是webpack中文文档对于插件(plugin)的一个概念描述。

以上是loader和plugin的一些概念。

接下来先讲讲webpack的loader模块
在loader中，有test和use两个属性。
test：其实就是让你告诉webpack打包构建的时候遇到哪些类型的文件需要进行处理或者转换。
use：告诉webpack使用哪个loader模块对上面test指定的文件类型进行处理。

举个小栗子

rules: [
   {
    
    
     test: /\.vue$/,
     loader: 'vue-loader',
     options: vueLoaderConfig
    }
  ]

像上面这一小块代码，其实就是在webpack的module中配置一下正则，告诉webpack当你打包编译遇到.vue文件的时候使用vue-loader这一个loader模块进行转换处理。当然options是一些简单的配置项。（里面其实就是通过判断开发环境还是生产环境执行相对应规则）

 {
    
    
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  }

再来看一个，像这一个的话其实就是告诉webpack打包编译的时候，遇到.js的文件使用babel-loader模块去转换。然后比上面多了一个include，其实就是告诉webpack，哪些目录中的 .js 文件需要进行 babel-loader。

更多具体的配置可以看webpack中文文档：https://v4.webpack.docschina.org/concepts/loaders

接下来介绍一下几个webpack插件：
1、html-webpack-plugin
主要作用是生产html文件。在entry配置中配置入口模板，编译打包后的内容会在此模板上插入内容。
配置项inject：
默认值是true：表示script标签将插入在body底部
值为body：效果和true一样。
值为head：script 标签位于 head 标签内
值为false：不插入生成的 js 文件，只是单纯的生成一个 html 文件

2、HotModuleReplacementPlugin
这是一个热更新模块，依赖于webpack-dev-server。
webpack-dev-server打包时候会更新打包文件或者刷新整个页面，而HotModuleReplacementPlugin可以做到只修改改变的那部分。

//用法：
plugins: [
  	new webpack.HotModuleReplacementPlugin()
]

3、clean-webpack-plugin
会根据 output.path 自动清理项目生成的 bundle 文件。

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
		  new HtmlWebpackPlugin({
    
    
		    template: path.join(__dirname, '/index.html'),
		  }),
		  new CleanWebpackPlugin(), // 所要清理的文件夹名称
		]

4、mini-css-extract-plugin
对每个包含 css 的 js 文件都会创建一个 CSS 文件，提取为独立的css文件。

这个插件应该只用在生产环境配置，并且在 loaders 链中不使用 style-loader, 而且这个插件暂时不支持 HMR

5、optimize-css-assets-webpack-plugin
作用是打包压缩减少css的体积。
const OptimizeCSSPlugin= require(“optimize-css-assets-webpack-plugin”) // 压缩css代码

optimization: {
    
    
	  minimizer: [
	    // 压缩css
	    new OptimizeCSSPlugin({
    
    })
	  ]
}

6、DefinePlugin
可以通过DefinePlugin定义一些全局变量,

	plugins: [
	    new webpack.DefinePlugin({
    
    
	      'process.env': ABCD
	    })
	]

在node环境中，也可以通过process.env定义和拿到全局变量。
在vue和react中，可以通过.env.development和.env.production 去定义，然后通过process.env使用全局变量。

7、DLLPlugin
这个插件件会生成一个名为 manifest.json 的文件，创建一个只有 dll 的bundle，将DLLReferencePlugin 映射到相关的依赖上。

 new webpack.DllPlugin({
    
    
	      path: path.join(dllDirPath, '[name].manifest.json'),
	      name: '_dll_[name]', // 和library 一致，输出的manifest.json中的name值
	    }),

更多插件可以查看webpack官方文档：https://v4.webpack.docschina.org/plugins

以上仅为个人见解，有不对的欢迎交流指出~

webpack小概念&&webpack插件总结

webpack小概念&&webpack插件总结

猜你喜欢