webpack.config.js
/**
* 所有构建工具都是基于nodejs平台运行的,模块化默认采用commonjs
* 运行项目指令
* webpack 会打包结果输出
* npx webpack-dev-server 只会在内存中编译打包,没有输出
*
* HMR: hot module replacement 热模块替换 / 模块热替换
* 作用: 一个模块发生变化,只会重新打包这一个模块。
* 极大提升构建速度。
*
* 样式文件: 可以使用HMR功能,因为style-loader内部实现了。
* js文件: 默认不能使用HMR功能。(需要修改js代码,添加支持HMR功能的代码)
* 注意: HMR功能对js的处理,只能处理非入口js文件的其它文件。
* html文件: 默认不能使用HMR功能。问题:html文件不能热更新了。(不用做 HMR 功能)
* 解决: 修改 entry入口,将html文件引入
**/
// resolve 用来拼接绝对路径的方法
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack 配置
// 入口
// entry: './src/js/index.js',
// 解决 html文件 的HMR 问题
entry: ['./src/js/index.js', './src/index.html'],
// 输出
output: {
// 输入文件名
filename: 'js/build.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
// build 路径
path: resolve(__dirname, 'build')
},
// loader 配置
module: {
rules: [
// 详细loader配置
{
// 匹配那些文件
test: /\.css$/,
// 使用哪些loader处理
use: [
// 执行顺序,从右到左,从下到上,依次执行
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 需要less-loader + less
'less-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片小于8Kb,就会被base64处理
// 优点: 减少请求数量,减轻服务器压力,缺点:图片体积会更大,文件请求速度更慢
limit: 8 * 1024,
// 问题: url-loader默认用es6模块化解析,html-loader引入图片是commonjs
// 解析式会出问题: [object Module]
// 解决:关闭url-loader的es模块化,使用commonjs解析
esModule: false,
// 给图片重命名
// [hash:10] 图片的hash的前10位
// [ext] 文件原来扩展名
name: '[hash:10].[ext]',
outputPath: 'imgs'
}
},
{
test: /\.html$/,
// 处理html文件的img图片 负责引入img,从而能被url-loader进行处理
loader: 'html-loader'
},
{
//处理其它资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
// 插件
plugins: [
// html-webpack-plugin
// 默认创建一个空的html, 引入打包输出的所有资源(js/css)
// 需要有结构的html文件
new HtmlWebpackPlugin({
// 复制文件,并自动引入打包输出的所有资源(js/css)
template: "./src/index.html"
})
],
// 模式 development 开发, production 生产
mode: 'development',
// 开发服务器 devServer,用来自动化
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为: npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname, 'build'),
// 启动gzip 压缩
compress: true,
port: 3000,
// 自动打开浏览器
open: true,
// 开启HMR功能
// 当修改了webpack配置,新配置要想生效,必须重启webpack服务
hot: true
}
}
index.js
import print from './print';
import '../css/a.css';
import '../css/b.css';
console.log('index.js文件被加载了~');
print();
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
// 模块 HMR
if(module.hot){
// 一旦 module.hot为true,说明开启了HMR功能。 让HMR功能代码生效
module.hot.accept('./print.js', function () {
// 方法会监听 print.js文件的变化,一旦发生变化,其它默认不会重新打包构建
// 会执行后面的回调函数
print();
})
}
print.js
console.log('print.js被加载了~');
function print() {
const content = 'hello print';
console.log(content);
}
export default print;