大学生考试搜题(webpack + tailwindcss)

这个项目是要webpack构建多页面应用
https://devbox.cn/p/551263335

1、项目创建

webpack项目需要两份配置，一份开发环境是以src为目录，一份生产环境配置一般打包到dist目录中。下面是

1、项目文件，依赖配置截图

2、开发环境配置

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  entry: path.resolve(__dirname, 'src/app.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use:[
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader',
        ]
      }
    ]
  },
  devServer: {
    host:'0.0.0.0',
    port: 80,
    hot:true,
    static:path.join(__dirname, '/src/pages')
  },
  mode:'development',
  plugins:[
    // new CleanWebpackPlugin({   // 打包之前清空 public目录
    //   cleanOnceBeforeBuildPatterns: ['public'],
    // }),
    new copyWebpackPlugin({  // 复制页面到public目录
      patterns: [
        {
          from: path.resolve(__dirname, 'src/pages/search/search.html'),
          to: path.resolve(__dirname, 'public/'),
        },
        {
          from: path.resolve(__dirname, 'src/pages/result/result.html'),
          to: path.resolve(__dirname, 'public/'),
        },
        {
          from: path.resolve(__dirname, 'src/pages/topicDetail/topicDetail.html'),
          to: path.resolve(__dirname, 'public/'),
        },
        {
          from: path.resolve(__dirname, 'src/pages/courseDetail/courseDetail.html'),
          to: path.resolve(__dirname, 'public/'),
        }
      ],
    }),
  ]
}

3、生产环境配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
  entry: {
    courseDetail: path.resolve(__dirname, 'src/pages/courseDetail/courseDetail.js'),
    search:path.resolve(__dirname, 'src/pages/search/search.js'),
    jquery:path.resolve(__dirname,'src/js/jquery-1.10.2.min')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use:[
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader',
        ]
      }
    ]
  },
  mode:'production',
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/pages/search/search.html',
      filename:'search.html',
      chunks:['search']//代码块,指定js文件
    }),
    new HtmlWebpackPlugin({
      template:'./src/pages/courseDetail/courseDetail.html',
      filename:'courseDetail.html',
      chunks:['courseDetail']//代码块,指定js文件
    })
  ]
}

4、注意点：

1、webstorm 只有使用tailwindcss 3.1.8的版本才能有智能提示；