Question

我试图通过执行以下操作将normalise.css和moment（节点模块）包含到我的构建中：

import moment from 'moment'
import styles from 'normalize'

但是它们不包含在最终版本中

配置：

var config = {
  context: __dirname + '/client',
  entry: {
    main: [
      "./app.js"
    ]
  },
  output: {
    path: __dirname + "./public",
    filename: "dist.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ]
      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      },
      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

Answer 1

当你说import styles from 'normalize'时，它接受你规范化是导出一些呼叫样式。

正确的方法是

import 'normalize'

同时确保它正在导出一些东西，否则如果你只是将它包含在你的项目中你可以只做一个简单的导入，如

import 'moment'

或者

require('momentjs/moment.js')

然而，它们不包含在最终版本中当webpack找不到您要导入的模块时，您应该会遇到错误

目前还有一个webpack插件。

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ko|ja|zh-cn)$/)
]

Source

更新： -

我做了一个简单的project on bitbucket with working moment and normalize included in build

如果您想使用导入，这里有一些信息。要从node_modules获取像normalize这样的css文件，您需要配置webpack来解决它

resolve:{
  extensions: ["",  ".js",".css"]
}

然后您可以使用像这样导入它们

import moment from "moment";
import "normalize.css";

在我提到的种子中你可以克隆并运行npm，当安装了每个依赖项时，只需运行npm start并转到localhost：8080，如果你打开开发工具，你可以选择一个app.js在内部构建，一个app.css具有规范化init。

Answer 2

可以尝试使用ExtractTextPlugin。我在下面有一个Webpack 2示例。这是Webpack 1 example。

var ExtractTextPlugin = require('extract-text-webpack-plugin')

var config = {
  context: __dirname + '/client',
  entry: {
    main: [
      "./app.js"
    ]
  },
  output: {
    path: __dirname + "./public",
    filename: "dist.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ]
      },
      // can also try removing the ?query from css below
      {
        test: /(\.less|\.css)$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
            'less'
          ]
        })
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  },
  plugins: [
    new HtmlWebpackPlugin()
    new ExtractTextPlugin({ filename: 'styles.css' })
  ]
}

Answer 3

我转移到webpack 2，修复了它。

外部文件未包含在webpack中

3 个答案:

正确的方法是

更新： -