webpack 引入css-loader 应对多入口的问题

最新推荐文章于 2023-07-09 18:19:56 发布

转载最新推荐文章于 2023-07-09 18:19:56 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yakoras/blog/807840

文章标签：

#webpack #python #ViewUI

本文详细介绍了使用Webpack进行多入口文件配置的方法，并针对不同场景下的CSS加载问题提供了具体解决方案。同时，文中还分享了如何根据不同环境调整Webpack配置，以实现更高效的打包与优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

var path = require('path');
var webpack = require('webpack');
module.exports = {
  entry :{
  "index": "./src/index/main.js",   //前台JS
  "admin": "./src/admin/main.js"   //后台JS
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?root=../'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue',
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map';
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}