Skip to content

Instantly share code, notes, and snippets.

@hrshadhin
Last active April 29, 2018 20:32
Show Gist options
  • Save hrshadhin/ce209187dcfe82f1b3e1f1b429338962 to your computer and use it in GitHub Desktop.
Save hrshadhin/ce209187dcfe82f1b3e1f1b429338962 to your computer and use it in GitHub Desktop.
webpack init configuration
Below 2 files are needed!
{
"name": "webpack-learning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=production node_modules/.bin/webpack --mode production",
"dev": "NODE_ENV=development node_modules/.bin/webpack --mode development",
"watch": "npm run dev -- --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"img-loader": "^2.0.1",
"jquery": "^3.3.1",
"node-sass": "^4.9.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
}
var webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const isProduction = process.env.NODE_ENV === 'production';
const PurifyCSSPlugin = require('purifycss-webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin')
// the path(s) that should be cleaned
let pathsToClean = ['dist']
// the clean options to use
let cleanOptions = {
root: __dirname,
verbose: true,
dry: false
}
module.exports = {
entry: {
app: [
'./src/main.js',
'./src/main.scss',
],
vendor: ['jquery']
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: "style-loader",
})
},
{
test: /\.(svg|eot|ttf|woff|woff2)$/,
use: 'file-loader'
},
{
test: /\.(png|jpe?g|gif)$/,
loaders: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[hash].[ext]'
}
},
'img-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new ExtractTextPlugin("[name].[hash].css"),
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, './*.html')),
minimize: isProduction,
}),
new webpack.LoaderOptionsPlugin({
minimize: isProduction,
debug: false
}),
function () {
this.plugin('done', stats => {
require('fs').writeFileSync(
path.join(__dirname, 'dist/manifest.json'),
JSON.stringify(stats.toJson().assetsByChunkName)
)
});
}
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment