1、准备

image.png

2、webpack.config.js

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4. entry: './src/index.js',
  5. output: {
  6. filename: 'built.js',
  7. path: resolve(__dirname, 'build')
  8. },
  9. module: {
  10. rules: [
  11. {
  12. test: /\.css$/,
  13. use: ['style-loader', 'css-loader']
  14. },
  15. // 打包其他资源(除了html/js/css资源以外的资源)
  16. {
  17. // 排除css/js/html资源
  18. exclude: /\.(css|js|html|less)$/,
  19. loader: 'file-loader',
  20. options: {
  21. name: '[hash:10].[ext]'
  22. }
  23. }
  24. ]
  25. },
  26. plugins: [
  27. new HtmlWebpackPlugin({
  28. template: './src/index.html'
  29. })
  30. ],
  31. mode: 'development'
  32. };

3、结果

image.png