javascript - webpack方式引用summernote提示require错误

Question

引用summernote提示如下错误， 不知道怎么解决

require function is used in a way in which dependencies cannot be statically extracted

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: {
    app: './src/main.js',   //vue系
    vendor: [               //依赖系
      'bootstrap/dist/css/bootstrap.css',
      'summernote/dist/summernote.css',
      'jquery', 'vue-strap',
      'bootstrap/dist/js/bootstrap.js',
      'summernote/dist/summernote.min.js'
    ],
  },
  resolve: {
    alias: {
      jquery: "jquery/dist/jquery.js"
    }
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    //"jquery": "jQuery"
  },
  output: {
    path: './build',
    publicPath: '/build/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue' },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
      { test: /\.(png|jpg)$/, loader: 'file' },
      { test: /\.(png|jpg)$/, loader: 'url?limit=10000'},
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /summernote\.(woff|eot|ttf)(\?.*)?$/, loader: 'url?limit=100000' }
    ]
  },
  vue: {
    loaders: {
      scss: 'style!css!sass?indentedSyntax',
      exclude: /node_modules/,
      cssSourceMap: false
    }
  },
  noParse: [
    /summernote\.min\.js/
  ],
  plugins: [
    new webpack.ProvidePlugin({
      "$" : "jquery",
      "jQuery" : "jquery",
      "window.jQuery" : "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin(/* chunkName = */"vendor", /* filename= */"vendor.bundle.js"),
  ],
  devtool: '#source-map'
}

main.js

import Vue from 'vue'
import app from './app.vue'
import VueRouter from 'vue-router'

import 'bootstrap/dist/css/bootstrap.css'
import 'summernote/dist/summernote.css'
import './styles.css'

import 'jquery/dist/jquery.js'
import 'bootstrap/dist/js/bootstrap.js'
import 'summernote/dist/summernote.min.js'

Vue.config.debug = process.env.NODE_ENV !== 'production'

Vue.use(VueRouter)

const router = new VueRouter()
const App = Vue.extend(app)

router.start(App, 'body')

报错提示：

./~/summernote/dist/summernote.min.js
Critical dependencies:
2:2826-2833 require function is used in a way in which dependencies cannot be statically extracted
2:2837-2844 require function is used in a way in which dependencies cannot be statically extracted
2:2929-2936 require function is used in a way in which dependencies cannot be statically extracted
2:2969-2976 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/summernote/dist/summernote.min.js 2:2826-2833 2:2837-2844 2:2929-2936 2:2969-2976

./~/summernote/dist/summernote-0.8.1-dist.zip
Module parse failed: E:\Projects\vuexsample\node_modules\summernote\dist\summernote-0.8.1-dist.zip Unexpected character '' (1:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:2)
    at Parser.pp.raise (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
    at Parser.pp.getTokenFromCode (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2831:8)
    at Parser.pp.readToken (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2526:15)
    at Parser.pp.nextToken (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2518:71)
    at Parser.pp.next (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2467:8)
    at Parser.pp.parseIdent (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:682:8)
    at Parser.pp.parseExprAtom (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:286:21)
    at Parser.pp.parseExprSubscripts (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
 @ ./~/summernote/dist ^\.\/.*$

./~/summernote/dist/summernote.js
Critical dependencies:
397:40-47 require function is used in a way in which dependencies cannot be statically extracted
398:8-15 require function is used in a way in which dependencies cannot be statically extracted
407:15-22 require function is used in a way in which dependencies cannot be statically extracted
408:22-29 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/summernote/dist/summernote.js 397:40-47 398:8-15 407:15-22 408:22-29

Answer 1

目前来看应该是个BUG，见issuse#1723，临时解决方案使用summernote-webpack-fix