Question

我正在使用这个 https://github.com/janrembold/vanilla-plugin-boilerplate 作为我的插件的首发。

首先，我的插件工作正常，现在我想在项目中添加babel，所以我决定加入一个潮流，使用 webpack 作为模块捆绑器。

这是工作vanilla-plugin-boilerplate的小提琴 https://jsfiddle.net/adhityoagam/1fk6p755/

这是它的webpack版本，它有一个错误
https://jsfiddle.net/adhityoagam/1fk6p755/2/

错误说

未捕获的ReferenceError：未在window.onload（（index）：233处定义Boilerplate）

这是我的webpack.config.js

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

module.exports = {
  entry: {
    'mediamanager': './vendor.js',
  },
  output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
  },
  module: {
    rules: [
      {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            //resolve-url-loader may be chained before sass-loader if necessary
            use: ['css-loader', 'sass-loader']
          })
      },
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
    },
  plugins: [
    new ExtractTextPlugin("[name].css"),
  ]
};

请指出我的错误，或者为什么它不起作用，谢谢。

Answer 1

这个插件样板文件没有考虑到webpack的创建。它绝对不是新创建的webpack项目的最佳选择。

根据项目的目标，您应该搜索一个不错的webpack kickstarter项目，该项目显示了一些不错的webpack配置和一些使用ES6的脚本演示，甚至更好地使用TypeScript。

祝你好运，扬

香草插件样板和webpack

1 个答案: