Skip to content

webpack 实现异步加载 JS

懒加载,其实 webpack 环境支持的

js
// 引入动态数据 - 懒加载
setTimeout(() => {
  // 回顾 vue React 异步组件,其实 webpack 环境支持的
  // 定义 chunk
  import('./dynamic-data.js').then((res) => {
    console.log(res.default.message); // 注意这里的 default
  });
}, 1500);

处理 React 的 JSX 使用

js
npm install --save-dev @babel/preset-react

然后配置 .babelrc 文件

js
{
  "presets": ["@babel/preset-react"]
}

处理 Vue 文件,则使用 vue-loader

js
npm install -D vue-loader vue-template-compiler

然后配置 webpack.common.js 文件

js
{
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: ['vue-loader'],
                include: srcPath
            },
        ]
    },
}

基于 MIT 许可发布