项目结构
webpackLoadOnDemand
│ package-lock.json
│ package.json
│ webpack.config.js
└─src
index.css
index.js
common.js
安装依赖
在webpackLoadOnDemand目录下运行
npm i webpack webpack-cli html-webpack-plugin css-loader mini-css-extract-plugin postcss-loader autoprefixer --save-dev
webpack配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exprots = {
mode:'development',
entry:'./src/index.js',
output:{
path:resolve(__dirname,'dist'),
filename:'[name].build.js'
},
module:{
rules:[
{
// 匹配文件规则
test:/\.css$/i,
// 使用的loader
use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
}
]
},
plugins:[new HtmlWebpackPlugin(),new MiniCssExtractPlugin({filename:"[name].css"})]
}
index.js
const loaderCommonLog = ()=>{
import("./common.js").then(module=>{
module.defualt.log("我加载了common.js模块")
})
}
const button = document.createElement("button");
button.innerHTML= '点击我加载common.js';
button.onclick = loaderCommonLog;
document.body.append(button);
效果
- 打开打包好后的html文件,打开控制台,查看控制台输出和network中的输出及其加载的文件
- 点击页面上的button组件
- 查看控制台可以看到输出了:点击我加载common.js,在network中可看到加载了src_common.js文件
打包命令
- 方式一:在webpackLoadOnDemand目录下运行
webpack --config ./webapck.config.js
- 方式二:在package.json文件的scripts属性新增如下命令
{
...
"scripts":{
"build":"webpack --config ./webpack.config.js"
}
...
}
修改保存后,在webpackLoadOnDemand目录下运行如下命令:
npm run build
打包后的目录
webpackAddBrowserPrefix
│ package-lock.json
│ package.json
│ postcss.config.js
│ webpack.config.js
├─dist
│ index.build.js
│ index.html
│ index.css
│ src_common.js
└─src
index.css
index.js
common.js