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;