arshtepe / css-file-loader Goto Github PK

const path 						= require('path');
const webpack 					= require('webpack');
const UrlLoader 				= require('url-loader');
const BrowserSyncPlugin 		= require('browser-sync-webpack-plugin');
const VueLoaderPlugin 			= require('vue-loader/lib/plugin');
const MiniCssExtractPlugin 		= require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin 	= require('optimize-css-assets-webpack-plugin');

publicFolder 					= path.resolve(__dirname, 'public');
// appFolder 						= path.resolve(__dirname, 'app');

console.log(publicFolder);

module.exports = {

	entry: { 
				// Selects main js file
				main: 	'./public/es6/index.js'
	},

	output: {
				// Main path for the js folder
				path: 		path.resolve(__dirname, 'public/js/'),
				// Select teh name the main js file (after compression)
				filename: 	'bundle.js',
				// Public path 
				// publicPath: 'http://localhost:8080',
				publicPath: '/public/js/',
				// publicPath: path.resolve(__dirname, 'public/js/'),
				// Name the chunkFile (in case of external scripts)
				chunkFilename: '[name].[contenthash].js'
	},

	module: {
				rules: [	// Vue Files
							{
								test: /\.vue$/,
								exclude: /node_modules/, 
								loader: 'vue-loader',
								options: {
											loader: {
												scss: 'vue-style-loader!css-loader!sass-loader', 
												css: 'vue-style-loader!css-loader'
											}
								}
							},
							// JS files
							{
								test: 		/\.js$/,
								exclude: 	/node_modules/,
								use: {
								  		loader: "babel-loader"
								}
							},
							// CSS / SASS files 
							{
								// test: /\.scss$/,
								test: /\.(sa|sc|c)ss$/,
     							use: [
      									{
      										loader: MiniCssExtractPlugin.loader,
      									},
      									{
      										loader: 'css-loader',
      										options: {
														url: false,
														minimize: true,
														sourceMap: true
      										}
      									},
      									{
      										loader: 'postcss-loader'
      									},
      									{
      										loader: 'css-file-loader', 
      										options: {
      											publicPath: '/public/fonts/'
      										}
      									},
      									{
      										loader: 'sass-loader',
      										options: {
														sourceMap: true, 
														minimize: true
      										}
      									}
      							]
							},
							// Font|SVG: Make Webpack know how and from where to load the files.
							{
								test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
								use: [
										{
											loader: 'file-loader',
								            options: {
									            name: 		'./public/fonts/[hash].[ext]',
									            // emitFile: 	false,
												// useRelativePath: false,
									            outputPath: './public/fonts/',
									            publicPath: './public/fonts/'
								            }
								         }
								]
							}
							/*{
								test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
								use: [{
									loader: 'url-loader',
									options: {
										fallback: 'file-loader',
										// useRelativePath: true,
										// outputPath: publicFolder + '/fonts/',
										// include: './node_modules/', 
										name: '[path][hash].[ext]',
										limit: 100000
									}
								}]
							}*/
				]
	},
	plugins: [	
				// Load jQuery globally 
				new webpack.ProvidePlugin({
					$: 'jquery',
					jQuery: 'jquery',
					'window.jQuery': 'jquery'
				}),
				
				// Hot module
				// new webpack.HotModuleReplacementPlugin(),
				
				// BrowserSync: Load page automatically on change
				new BrowserSyncPlugin({
					proxy: 'https://potato.mywebsite.com/', 
					port: 3000, 
					files: [
						'**/*.php'
					], 
					ghostMode: {
						clicks: false, 
						location: false, 
						forms: false, 
						scroll: false
					}, 
					minify: false,
					injectChanges: true, 
					logFileChanges: true, 
					logLevel: 'debug', 
					logPrefix: 'webpack', 
					notify: true, 
					reloadDelay: 0
				}),

				// Provides a way to customize how progress is reported during a compilation
				new webpack.ProgressPlugin(),
				
				// Loads Vue
				new VueLoaderPlugin(), 
				
				// For webpack-dev-server (currently not in use)
				// new webpack.HotModuleReplacementPlugin(), 
				
				// Handle css in different files (scss file in login.js for example to a hashed login.css file)
				new MiniCssExtractPlugin({ filename: '../css/[name].css' }), 
				
				// CSS assets during the Webpack build and will optimize \ minimize the CSS
				new OptimizeCSSAssetsPlugin({}),

				// Not sure if needed yet
				new webpack.NamedModulesPlugin()

	],
	devServer: {
					// https: 		true,
					headers: 		{ 'Access-Controll-Allow-Origin': '*' },
					compress: 		true, 
					quiet: 			true, 
					hot: 			true,
					inline: 		true
	}

};