电子与反应和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"
},
谁能帮助我?
在此先感谢。
答
可能是因为没有人。您正在将电子安装到您的节点模块,您所指的是modules: [path.resolve(__dirname, 'node_modules')]
。
简单地改变你的启动命令:
"main": "dist/main.js",
"scripts": {
"start": "electron ."
},
答
从@Anatoly该解决方案帮助我出现在电子窗口,但我不能跑过来的电子反应。
所以我发现这个教程的工作跑过来的电子发生反应: https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c
我希望这将帮助;)