Last active
April 29, 2018 20:32
-
-
Save hrshadhin/ce209187dcfe82f1b3e1f1b429338962 to your computer and use it in GitHub Desktop.
webpack init configuration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Below 2 files are needed! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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