Skip to content

Instantly share code, notes, and snippets.

@itzikbenh
Last active December 21, 2018 06:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save itzikbenh/f3eeea12e8eca0d8e8d4e255d4992bb9 to your computer and use it in GitHub Desktop.
Save itzikbenh/f3eeea12e8eca0d8e8d4e255d4992bb9 to your computer and use it in GitHub Desktop.
Webpack config. Asset files are in assets/src/{js/scss} and they are being compiled to public/{js/css}
import '../scss/admin.scss';
import '../scss/app.scss';
import './fileOne.js';
import './fileTwo.js';
import './fileThree.js';
{
"name": "webpack-wordpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"production": "cross-env NODE_ENV=production webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/itzikbenh/water.git"
},
"author": "Isaac Ben",
"license": "ISC",
"bugs": {
"url": "https://github.com/itzikbenh/water/issues"
},
"devDependencies": {
"autoprefixer": "^6.7.5",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.13.2",
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.13.0",
"browser-sync-webpack-plugin": "^1.1.4",
"cross-env": "^3.1.4",
"css-loader": "^0.26.2",
"cssnano": "^3.10.0",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.1",
"node-sass": "^4.5.0",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"postcss-ant": "^2.1.1",
"postcss-loader": "^1.3.2",
"sass-loader": "^6.0.2",
"style-loader": "^0.13.2",
"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
"uglifyjs-webpack-plugin": "^0.2.1",
"url-loader": "^0.5.8",
"webpack": "^2.2.1"
}
}
module.exports = {
plugins: [
require('postcss-ant'),
require('autoprefixer')
]
};
import '../scss/vendor.scss';
import 'bootstrap-sass';
$icon-font-path: '../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const config = {
entry: {
app: './assets/src/js/app.js',
vendor: './assets/src/js/vendor.js',
admin: './assets/src/js/admin.js',
},
output: {
filename: '/js/[name].js',
path: path.resolve(__dirname, 'public'),
},
devtool: "eval",
module: {
rules: [
{
test: /\.scss$/,
exclude: /(node_modules|bower_components)/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
}),
},
{
test: /\.(woff2?|ttf|eot|svg)$/,
use: ['url-loader']
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
plugins: [
new ExtractTextPlugin('/css/[name].css'),
new BrowserSyncPlugin({
proxy: 'localhost:8888/mysite',
port: 3000,
files: [
'**/*.php'
],
ghostMode: {
clicks: false,
location: false,
forms: false,
scroll: false
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'wepback-patterns',
notify: true,
reloadDelay: 0
})
]
};
//If true JS and CSS files will be minified
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new UglifyJSPlugin(),
new OptimizeCssAssetsPlugin()
);
}
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment