网站制作过程中常见的问题,建设银行面试通知网站,wordpress图片多链接,网站建设策划书 范文1.HMR
在devServer当中添加hot:true
热模块化功能
含义:当其中有一个文件发生变化的时候#xff0c;那么就会被重新打包一次#xff0c;极大的提高了构建速度 A.样式文件:可以使用HMR功能#xff0c;因为在style-loader当中实现了
B.js文件:默认不能使用HMR功能#xf…1.HMR
在devServer当中添加hot:true
热模块化功能
含义:当其中有一个文件发生变化的时候那么就会被重新打包一次极大的提高了构建速度 A.样式文件:可以使用HMR功能因为在style-loader当中实现了
B.js文件:默认不能使用HMR功能如果要使用需要添加能在js当中使用HMR功能的代码
注意:HMR对js文件的处理只能处理非入口文件的js文件
例如在js代码当中使用HMR功能:
function print(){console.log(1);
}
if(module.hot){module.hot.accept(./app.js,function(){print();})
} C.html文件:不能使用HMR功能因为html文件就一个改动了那么就要对全部文件都进行编译。
解决方法:修改entry入口将html文件引入 最终代码:
/*HMR: hot module replacement 热模块替换 / 模块热替换作用一个模块发生变化只会重新打包这一个模块而不是打包所有模块 极大提升构建速度样式文件可以使用HMR功能因为style-loader内部实现了~js文件默认不能使用HMR功能 -- 需要修改js代码添加支持HMR功能的代码注意HMR功能对js的处理只能处理非入口js文件的其他文件。html文件: 默认不能使用HMR功能.同时会导致问题html文件不能热更新了~ 不用做HMR功能解决修改entry入口将html文件引入
*/const { resolve } require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: [./src/js/index.js, ./src/index.html],output: {filename: js/built.js,path: resolve(__dirname, build)},module: {rules: [// loader的配置{// 处理less资源test: /\.less$/,use: [style-loader, css-loader, less-loader]},{// 处理css资源test: /\.css$/,use: [style-loader, css-loader]},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: url-loader,options: {limit: 8 * 1024,name: [hash:10].[ext],// 关闭es6模块化esModule: false,outputPath: imgs}},{// 处理html中img资源test: /\.html$/,loader: html-loader},{// 处理其他资源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: file-loader,options: {name: [hash:10].[ext],outputPath: media}}]},plugins: [// plugins的配置new HtmlWebpackPlugin({template: ./src/index.html})],mode: development,devServer: {contentBase: resolve(__dirname, build),compress: true,port: 3000,open: true,// 开启HMR功能// 当修改了webpack配置新配置要想生效必须重新webpack服务hot: true}
}; 2.souce-map
基本格式
devtool: eval-source-map(在这里可以使用其他格式)
概念: source-map: 一种 提供源代码到构建后代码映射 技术 如果构建后代码出错了通过映射可以追踪源代码错误 基本格式:[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map source-map外部 错误代码准确信息 和 源代码的错误位置 inline-source-map内联 只生成一个内联source-map 错误代码准确信息 和 源代码的错误位置 hidden-source-map外部 错误代码错误原因但是没有错误位置 不能追踪源代码错误只能提示到构建后代码的错误位置 eval-source-map内联 每一个文件都生成对应的source-map都在eval 错误代码准确信息 和 源代码的错误位置 nosources-source-map外部 错误代码准确信息, 但是没有任何源代码信息 cheap-source-map外部 错误代码准确信息 和 源代码的错误位置 只能精确到行 cheap-module-source-map外部 错误代码准确信息 和 源代码的错误位置 module会将loader的source map加入 内联 和 外部的区别1. 外部生成了文件内联没有 2. 内联构建速度更快 开发环境速度快调试更友好 速度快(evalinlinecheap...) eval-cheap-souce-map eval-source-map 调试更友好 souce-map cheap-module-souce-map cheap-souce-map 生产环境源代码要不要隐藏? 调试要不要更友好 内联会让代码体积变大所以在生产环境不用内联 nosources-source-map 全部隐藏 hidden-source-map 只隐藏源代码会提示构建后代码错误信息 配置文件为
const { resolve } require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: [./src/js/index.js, ./src/index.html],output: {filename: js/built.js,path: resolve(__dirname, build)},module: {rules: [// loader的配置{// 处理less资源test: /\.less$/,use: [style-loader, css-loader, less-loader]},{// 处理css资源test: /\.css$/,use: [style-loader, css-loader]},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: url-loader,options: {limit: 8 * 1024,name: [hash:10].[ext],// 关闭es6模块化esModule: false,outputPath: imgs}},{// 处理html中img资源test: /\.html$/,loader: html-loader},{// 处理其他资源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: file-loader,options: {name: [hash:10].[ext],outputPath: media}}]},plugins: [// plugins的配置new HtmlWebpackPlugin({template: ./src/index.html})],mode: development,devServer: {contentBase: resolve(__dirname, build),compress: true,port: 3000,open: true,hot: true},devtool: eval-source-map
};
