跟着视频做：Antd样式的全局引入 与 CSS模块化 冲突、混乱 怎么解决？

Question

webpack配置：

index.js：

header.js：

Answer 1

慕斯0581115 2018-06-21 12:43:20

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

path: path.join(__dirname, 'dist'),

filename: 'bundle.js'

},

module: {

rules: [

{   test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader'

}

},

{

test: /\.css$/,

use: [

"style-loader",

"css-loader",

]

}

]

},

plugins: [

new HtmlWebpackPlugin({template: './src/index.html'})

]

};

• 提问者 赵小刀 #1

  还是报错，
  配置文件：
  
  var debug = process.env.NODE_ENV !== "production";
  var webpack = require('webpack');
  var path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      mode: 'none', // 这个必须要设置不然出现警告
      context: path.join(__dirname),
      devtool: debug ? "inline-sourcemap" : null,
      //入口文件
      entry: "./src/js/index.js",
      module: {
          rules: [
              {
                  test: /\.js?$/,
                  exclude: /(node_modules)/,
                  loader: 'babel-loader',
                  query: {
                      presets: ['react', 'es2015'],
                      plugins: ['react-html-attrs']
                  }
              },
              {
                  test: /\.css$/,
                  // loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
                  loader: 'style-loader!css-loader'
              }
          ]
      },
      //输出文件
      output: {
          path: __dirname,
          filename: "./src/bundle.js"
      },
  
      plugins: [
          new HtmlWebpackPlugin({template: './index.html'})
      ]
  };
  我的整个项目的目录结构和跟老师的排版一致的

• 慕斯0581115 回复 提问者 赵小刀 #2

  哦  我的项目结构目录跟老师的不一样，但是应该也不影响。你只要吧entry的路径写正确， 其他的按着我的来配置应该就没有问题。 然后把HtmlWebpackPlugin 有关的都去掉 因为你没有安装这个包。  你再试试？

Answer 2

慕斯0581115 2018-06-21 12:08:08

你的webpack  版本和老师的一样吗？ 如果用的是webpack4 的话 在配置中要改一下

• 提问者 赵小刀 #1

  我用的webpack4，怎么改？同学可否贴下代码？