webpack 多应用入口 笔记

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')
			}
		]
    }
}

8.开启代码调试: devtool:“source-map”(显示源代码)
9.optimization 配置 : 代码拆分
10.多个html入口文件需要配置镀铬htmlWebpackPlugin实例
11. 热更新:HotModuleReplacementPlugin

猜你喜欢

转载自blog.csdn.net/mmjinglin/article/details/82776251