webpack 多应用入口笔记

mmjinglin

于 2018-09-19 18:15:44 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/mmjinglin/article/details/82776251

前端专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了使用Webpack作为模块打包工具，在项目中如何配置各种加载器以支持不同类型的资源文件，包括ES6语法转换、样式处理、图片及字体文件加载等，并介绍了代码调试、优化配置及热更新的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.所需插件：webpack/webpack-dev-server/webpack-merge
2.babel 相关插件（用来对ES6语法进行转换）
babel-core/babel-loader/babel-preset-env

3.样式处理相关插件
css-loader/style-loader/postcss-loader/antoprefixer
autoprefixer:是一款自动管理浏览器前缀对插件，它可以解析css文件并且添加浏览器前缀到css内容里
4.file-loader/url-loader 该插件将在导入图片，字体等文件时发挥作用
5.Eslint 用来对JavaScript代码进行检测
6.rimraf :删除文件
7.cache-loader : 在一些性能开销较大的loader之前添加此loader，以将结果缓存到磁盘里。
例：webpack.config.js

module.exports = {
     module:{
     	rules:[
			{
				test : /\.ext$/,
				use:['cache-loader',....loaders],
				include:path.resolv('src')
			}
		]
    }
}