First Commit

frontend/webpack/new-webpack.config.dev.js

@@ -0,0 +1,165 @@
+var path = require("path")
+var webpack = require("webpack")
+var assetsPath = path.join(__dirname, "..", "public", "assets")
+var publicPath = "/assets/"
+
+module.exports = {
+	name: "browser",
+	mode: 'development',
+	devtool: "eval-source-map",
+
+	// The base directory (absolute path!) for resolving the entry option.
+	context: path.join(__dirname, "..", "src", "client"),
+
+	entry: {
+		app: [
+			"./client",
+			"webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true"
+		]
+	},
+
+	output: {
+		path: assetsPath,
+		filename: "[name].js",
+		publicPath: publicPath
+	},
+
+	module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+		},
+		{
+			test:/\.css$/,
+			use:['style-loader','css-loader']
+
+}, 
+		// "postcss" loader applies autoprefixer to our LESS.
+		// "css" loader resolves paths in CSS and adds assets as dependencies.
+		// "style" loader turns CSS into JS modules that inject <style> tags.
+		// In production, we use a plugin to extract that CSS to a file, but
+		// in development "style" loader enables hot editing of CSS.
+		{
+			test: /\.less$/,
+			exclude: [
+				path.resolve(paths.appSrc, 'components'),
+			],
+			use: extractLess.extract({
+				fallback: {
+					loader: 'style-loader',
+					options: {
+						hmr: isDev,
+					},
+				},
+				use: [
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							importLoaders: 1,
+							minimize: process.env.NODE_ENV === 'production',
+							sourceMap: shouldUseSourceMap,
+						},
+					},
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							// Necessary for external CSS imports to work
+							// https://github.com/facebookincubator/create-react-app/issues/2677
+							ident: 'postcss',
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								autoprefixer(autoprefixerOptions),
+							],
+						},
+					},
+					{ loader: require.resolve('less-loader') }
+				],
+				...extractTextPluginOptions,
+			}),
+		},
+		// Heads up!
+		// We apply CSS modules only to our components, this allow to use them
+		// and don't break SUI.
+		{
+			test: /\.less$/,
+			include: [
+				path.resolve(paths.appSrc, 'components', 'styling'),
+			],
+			use: extractLess.extract({
+				fallback: {
+					loader: require.resolve('style-loader'),
+					options: {
+						hmr: isDev,
+					},
+				},
+				use: [
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							importLoaders: 1,
+							localIdentName: cssClassName,
+							modules: true,
+							minimize: process.env.NODE_ENV === 'production',
+							sourceMap: shouldUseSourceMap,
+						},
+					},
+					{
+						loader: require.resolve('postcss-loader'),
+						options: {
+							// Necessary for external CSS imports to work
+							// https://github.com/facebookincubator/create-react-app/issues/2677
+							ident: 'postcss',
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								autoprefixer(autoprefixerOptions),
+							],
+						},
+					},
+					{ loader: require.resolve('less-loader') }
+				],
+			}),
+		},
+
+// "url" loader works like "file" loader except that it embeds assets
+// smaller than specified limit in bytes as data URLs to avoid requests.
+// A missing `test` is equivalent to a match.
+{
+	test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+	loader: require.resolve('url-loader'),
+	options: {
+		limit: 10000,
+		name: 'static/media/[name].[hash:8].[ext]',
+	},
+},
+// "file" loader makes sure assets end up in the `build` folder.
+// When you `import` an asset, you get its filename.
+{
+	test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+	loader: require.resolve('file-loader'),
+	options: {
+		name: '/static/media/[name].[hash:8].[ext]',
+	},
+}
+],
+		
+  },
+
+	resolve: {
+		extensions: [".js", ".jsx"],
+		modules: [
+      path.resolve('src'),
+      'node_modules',
+    ],
+	},
+
+	plugins: [
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.NoEmitOnErrorsPlugin(),
+		new webpack.DefinePlugin({
+			"process.env": {
+				NODE_ENV: JSON.stringify("development")
+			}
+		})
+	]
+}