@beefront17

Deploy react приложения, рекомендации?

Добрый день! Помогите пожалуйста задеплоить приложение.
Есть несколько вопросов.
1. Как грузить другой вебпак кофиг на продакшне? (Пока у меня просто в packege.json "build": "webpack -p"
2. Что использовать в этом кофиге(например как командой убрать все console.log() )?
3. Как сделать, чтобы sass компилировался в отдельный файл?
Буду благодарен за любые рекомендации.
На данный момент кофиг выглядит так:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const outputPath = path.resolve(__dirname, './dist')
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
	filename: "bundle.css",
	disable: process.env.NODE_ENV === "development"
});
const webpackConfig = {
	entry: {
		app: [
			'react-hot-loader/patch',
			path.resolve(__dirname, './src/index.js')
		]
	},
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: '[name].js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				enforce: 'pre',
				use: 'eslint-loader'
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: 'babel-loader'
			},
			{
				test: /\.scss$/,
				exclude: /node_modules/,

				use: [
					{
						loader: "style-loader"
					}, {
						loader: "css-loader", options: {
							sourceMap: true
						}
					}, {
						loader: "sass-loader", options: {
							sourceMap: true
						}
					}]
			},
			{
				test: /\.(gif|png|jpg|jpeg|svg)$/,
				exclude: /node_modules/,
				include: path.resolve(__dirname, './src/assets/'),
				use: 'url-loader?limit=10000&name=assets/[name]-[hash].[ext]'
			}
		]
	},
	resolve: {
		alias: {
			'components': path.resolve(__dirname, './src/components'),
			'containers': path.resolve(__dirname, './src/containers'),
			'constants': path.resolve(__dirname, './src/constants'),
			'actions': path.resolve(__dirname, './src/actions'),
			'reducers': path.resolve(__dirname, './src/reducers'),
			'store': path.resolve(__dirname, './src/store'),
			'assets': path.resolve(__dirname, './src/assets'),
			'helpers': path.resolve(__dirname, './src/helpers'),
		}
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.join(__dirname, './src/assets/index.html'),
			filename: 'index.html',
			path: outputPath
		}),
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin(),
		extractSass
	],
	devServer: {
		contentBase: path.resolve(__dirname, './dist'),
		port: 8080,
		historyApiFallback: true,
		inline: true,
		hot: true,
		host: '0.0.0.0',
		watchOptions: {aggregateTimeout: 300, poll: 1000},
		headers: {
			"Access-Control-Allow-Origin": "*",
			"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
			"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
		}

	}
};

module.exports = webpackConfig;

Спасибо!
  • Вопрос задан
  • 1239 просмотров
Решения вопроса 1
miraage
@miraage
Старый прогер
1. Как грузить другой вебпак кофиг на продакшне? (Пока у меня просто в packege.json "build": "webpack -p"

scripts: {
  "dev": "webpack-dev-server --env.dev",
  "build": "webpack -p --env.prod"
}

webpack docs

2. Что использовать в этом кофиге(например как командой убрать все console.log() )?

UglifyJSPlugin + drop_console

3. Как сделать, чтобы sass компилировался в отдельный файл?

ExtractTextWebpackPlugin + sass-loader

А вообще, посмотрите в сторону create-react-app.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы