const { resolve } = require('path')
const htmlWebpackPlugins = require('html-webpack-plugin')
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
// loader的配置
{
// 处理css资源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 处理less资源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
name: '[hash:10].[ext]',
limit: 8 * 1024,
// 关闭es6模块化
esModule: false,
outputPath: 'imgs'
}
},
{
// 处理html中img资源
test: /\.html/,
loader: 'html-loader'
},
// 处理其他资源
{
exclude: /\.(html|css|js|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins的配置
new htmlWebpackPlugins({
template: resolve(__dirname, 'src/index.html')
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
// 开启HMR功能
// 当修改了webpack配置,新配置要想生效,必须重新启动webpack服务
hot: true
},
devtool: 'eval-source-map'
}
/**
* source-map：一种提供源代码到构建后代码映射 技术 (如果构建后代码出错了，通过映射可以追踪源代码错误)
* [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
* source-map：外部
* 错误代码准确信息 和 源代码的错误位置
* inline-source-map：内联
* 1. 只生成一个内联source-map
* 错误代码准确信息 和 源代码的错误位置
* hidden-source-map：外部
* 错误代码错误原因，但是没有错误位置
* 不能追踪到源代码错误，只能提示到构建后代码的错误位置
* eval-source-map：内联
* 1. 每一个文件都生成对应的source-map，都在eval中
* 错误代码错误原因，但是没有错误位置
* 不能追踪到源代码错误，只能提示到构建后代码的错误位置
* nosources-source-map：外部
* 错误代码准确信息，但是没有任何源代码信息
* cheap-source-map：外部
* 错误代码准确信息 和 源代码的错误位置
* 只能精确到行
* cheap-module-source-map：外部
* 错误代码准确信息 和 源代码的错误位置
* module会将loader的source map加入
*
* 内联 和 外部的区别：1.外部生成了文件，内联没有 2. 内联构建速度更快
*
* 开发环境：速度快，调试更友好
* 速度快(eval>inline>cheap>...)
* eval-cheap-souce-map
* eval-source-map
* 调试更友好
* souce-map
* cheap-module-souce-map
* cheap-souce-map
*
* --> eval-soure-map(脚手架默认) / eval-cheap-module-souce-map
*
* 生产环境：源代码要不要隐藏? 调试要不要更友好
* 内联会让代码体积变大，所以在生成环境不要内联
* nosources-source-map 全部隐藏
* hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
*
* --> souce-map / cheap-module-souce-map
*/
22-source-map的相关教程结束。
