在 webpack 中的 js 文件中导入 moment.js

Question

In my project I use webpack and npm. I installed moment.js : npm install moment . Then I want to import it in my app.js file: import moment from "moment" .

But it doesn't work. I get: Can't resolve moment in ...

I try let moment = require('moment'); but I get the same error.

But I can require it in my webpack.config.js file without errors.

My app.js file is located on /myapp/frontend/app.js

My webpack.config.js file on: /myapp/webpack.config.js

So, please explain why I can't require moment in my app.js and how can I do this?

My config file:

const webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV || "development"
const path = require('path');

//example of successfull importing
let moment = require('moment');
console.log(moment(new Date()));

module.exports = {
    context: __dirname + "/frontend",
    entry: {
        app:"./app"
    },
    output: {
        path: path.resolve(__dirname,"./public/js"),
        publicPath:"/public/js/",//public path in internet
        filename: "build.js"
    },

    watch: NODE_ENV == "development",
    watchOptions:{
        aggregateTimeout:100//default = 300
    },
    devtool: NODE_ENV == "development"?"cheap-inline-module-source-map":"cheap-source-map",
                                      //cheap-inline-module-source-map - to see sources in build.js
                                      //eval - fastest

    resolve:{
        modules: ['node-modules'],
        extensions:['.js']
    },
    module:{
        loaders:[{
            test: /\.js$/,
            loader:"babel-loader?presets[]=es2015",
            exclude: /node_modules/
        }]
    }
};

if(NODE_ENV == "production"){
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                unsafe:true,
                drop_console:true
            }
        })
    );
}

It is my tree structure without node_modules folder:

SOLVING OF PROBLEM : problem was in my configuration:

  resolve:{
            modules: ['node-modules'],
            extensions:['.js']
        },

There is node-modules is wrong, must be node_modules . Simple typo..

Answer 1

Without knowing a bit more about your file structure it's difficult to be certain as to why, but the issue is probably that your webpack config is not finding the moment module in your node_modules.

As a test, ran the following:

//webpack.js
const path = require('path');

module.exports = {
  entry: path.join(__dirname, '..', 'public', 'js', 'index.js'),
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '..', 'public', 'dist'),
  },
};

and then with moment and jquery installed via npm install --save jquery moment , I made a index.js file:

import $ from jquery;
import moment from moment;

const m = moment(); 

No build errors and no runtime errors when included on the HTML page. Try starting simply first and then build up from there on your webpack config. Also, I'm not sure if webpack does anything with package.json but I noticed you didn't signal the --save option. It's a good habit to get into.

Answer 2

For my issue, I have change import {moment} from 'moment' to import * as moment from 'moment'; and it's working now!

Answer 3

就我而言，当我放置window.moment = require('moment');时，问题就解决了window.moment = require('moment');