WebpackWebpack loader 和 Webpack plugin 区别 loader 怎么实现懒加载配置多

Webpack loader 和 Webpack plugin 区别

loader，加载器，用来load一个文件，比如babel loader 用来加载高级的JS变成IE支持的JS，css loader和style loader 用来加载css，把它变成页面中的style 标签
plugin，插件，用来加强功能，plugin功能比较丰富，loader比较单一，例如HTML webpack plugin 用来生成HTML文件，mincss exact plugin 用来抽取css代码变成一个文件

怎么实现懒加载

用 import 括号加载文件，得到一个promise，promise的then前面写成功之后做什么，后面写失败之后做什么

配置多页应用

这是对应的 webpack config：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry: {
     app: './src/app.js',
     admin: './src/admin.js',
  },
   plugins: [
     new HtmlWebpackPlugin({
       filename: 'index.html',
       chunks: ['app']
  }),
   new HtmlWebpackPlugin({
     filename: 'admin.html',
     chunks: ['admin']
       })
   ],
};

如何支持无限多页面呢？

const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs')
const path = require('path')
const filenames = fs.readdirSync('./src/pages')
   .filter(file => file.endsWith('.js'))
   .map(file => path.basename(file, '.js'))
const entries = filenames.reduce((result, name) => (
   { ...result, [name]: `./src/pages/${name}.js` }
), {})
const plugins = filenames.map((name) =>
new HtmlWebpackPlugin({
   filename: name + '.html',
   chunks: [name]
  })
)
module.exports = {
  entry: {
   ...entries
  },
  plugins: [
   ...plugins
  ],
};

解决开发时的跨域问题

在开发时，我们的页面在 localhost:8080 ，JS 直接访问后端接口（如 juejin.cn 或 http://localhost:3000 ）会报跨域错误。为了解决这个问题，可以在 webpack.config.js 中添加如下配置

module.exports = {
 //...
  devServer: {
    proxy: {
   '/api': {
     target: 'https://juejin.cn',
     changeOrigin: true,
         },
       },
   },
};

此时，在 JS 中请求 /api/users 就会自动被代理到 juejin.cn/api/users 。
如果希望请求中的 Origin 从 8080 修改为 juejin.cn，可以添加 changeOrigin: true 。如果要访问的是 HTTPS API，那么就需要配置 HTTPS 证书，否则会报错。不过，如果在 target 下面添加 secure: false ，就可以不配置证书且忽略 HTTPS 报错。