电子与反应和webpack

我想与webpack运行一个简单的电子应用程序，并作出反应。电子与反应和webpack

所以我把我的WebPack与target: "electron"

const webpack = require('webpack'); 
const path = require('path'); 
const SassLintPlugin = require('sasslint-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const extractSass = new ExtractTextPlugin({ 
    filename: '[name].css', 
    disable: process.env.NODE_ENV === 'development', 
}); 

module.exports = { 
    target: 'electron', 
    context: path.resolve(__dirname), 
    entry: { 
    app: './assets/js/components/index', 
    main: './main', 
    }, 
    output: { 
    publicPath: '/dist/', 
    path: path.resolve('./dist/'), 
    filename: '[name].js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'eslint-loader', 
     include: path.resolve(__dirname, './assets/js/'), 
     exclude: /node_modules/, 
     enforce: 'pre', 
     }, 
     { 
     test: /\.jsx?$/, 
     include: path.resolve(__dirname, './assets/js/'), 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.scss$/, 
     include: path.resolve(__dirname, './assets/scss/'), 
     loader: extractSass.extract({ 
      use: [ 
      { loader: 'css-loader' }, 
      { loader: 'sass-loader' }, 
      ], 
      // use style-loader in development 
      fallback: 'style-loader', 
     }), 
     exclude: /node_modules/, 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file?name=public/fonts/[name].[ext]', 
     }, 
    ], 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    modules: [path.resolve(__dirname, 'node_modules')], 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['main'], 
    }), 
    new SassLintPlugin({ 
     configFile: '.sass-lint.yml', 
     context: [path.resolve(__dirname, './assets/scss/')], 
     ignoreFiles: [], 
     ignorePlugins: [], 
     glob: '**/*.s?(a|c)ss', 
     quiet: false, 
     failOnWarning: false, 
     failOnError: true, 
     testing: false, 
    }), 
    extractSass, 
    new HtmlWebpackPlugin({ 
     title: 'Calendar Component', 
     template: 'assets/index-template.html', 
     minify: { 
     collapseWhitespace: process.env.NODE_ENV === 'production', 
     }, 
    }), 
    ], 
};

我的包被正确创建成的index.html，app.js和main.js和./dist文件夹。

但我得到了一个错误：无法在my_path_project找到电子/ DIST

我的剧本在的package.json是：

"main": "./dist/main.js", 
    "scripts": { 
    "start": "electron ./dist/", 
    "dev": "NODE_ENV=development webpack" 
    },

谁能帮助我？

在此先感谢。

来源

2017-05-30 Alessander França

可能是因为没有人。您正在将电子安装到您的节点模块，您所指的是modules: [path.resolve(__dirname, 'node_modules')]。

简单地改变你的启动命令：

"main": "dist/main.js", 
    "scripts": { 
    "start": "electron ." 
    },

来源

2017-05-31 04:35:31

从@Anatoly该解决方案帮助我出现在电子窗口，但我不能跑过来的电子反应。

所以我发现这个教程的工作跑过来的电子发生反应： https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c

我希望这将帮助;）

来源

2017-05-31 13:10:39

电子与反应和webpack

回答

相关问题