webpack 学习总结

一： webpack 核心概念

1. entry （分析构建内部依赖图）
2. output （输出 & 命名）
3. loader （翻译官）
4. plugins （优化、压缩等等）
5. mode （development、production）

二： webpack 打包静态资源

1. 打包css、less

module: {
	rules: [
    	{
        	test: '/\.css$/',
            	use: ['style-loader', 'css-loader]
        }，
        {
        	test: '/\.less$/',
            	use: ['style-loader', 'css-loader', 'less-loader]
        }
    ]
}

1. use 数组中的执行顺序是从右到左依次执行
2. css-loader：将css文件变成commonjs模块，加载到js文件中，里面的内容是样式字符串
3. style-loader: 创建style标签，将js文件中的样式资源插入，然后添加到head标签中生效
4. less-loader: 将less文件编译成css文件
5. 每个对象的loader只能处理一种文件类型

2. 打包 html

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
	// 默认创建一个html文件，自动引入打包输出的所有资源
	new HtmlWebpackPlugin({
    	// 以./src/index.html 作为模版，复制这个html文件，并自动引入打包输出的所有资源
    	template: './src/index.html'
    }) 
]

3. 打包图片资源

{
  test: /\.(jpeg|png|gif)$/,
  // 使用一个loader
  loader: 'url-loader',
  options: {
    // 图片大小小于 8kb， 就会用base64处理
    limit: 8 * 1024,
    esModule: false,
    // url-loader 默认使用es6模块话解析，而html-loader引入图片是commonjs，解析时会出现问题： 【object Module】
    // 解决： 关闭url-loader 的 es6模块化
    name: '[hash:10].[ext]' // ext 取文件原来的扩展名，hash 取元素hash的前10位
  }
 }, 
{
  test: /\.(jpeg|png|gif)$/,
  loader: 'file-loader'
}
{
  test: /\.html$/,
  loader: 'html-loader'
}

url-loader 和 file-loader的区别：

相同点	不同点
1. 处理 css 和 js 中的图片	1. url-loader 将文件转为 base64编码格式，file-loader直接将导入的图片替换成正确的地址。
2. 处理 svg 图片	2. url-loader 使用时注意图片体积不可以太大

1. url-loader 处理不了html中的图片
2. base64图片
   优点：能够减少一个图片的 HTTP 请求。 
   缺点：图片体积会更大（文件请求速度慢）
3. html-loader 是用来处理html文件的img图片的， 负责引入这个图片，从而能被url-loader进行处理
5. html-loader 匹配 html 文件，按照 html 来解析，html-webpack-plugin 的 ejs 语法会和这个有冲突，导致不能使用。
6. html-loader 打包后的图片不显示，通过使用 html-withimg-loader 解决。