Skip to content

Instantly share code, notes, and snippets.

@unclechu
Created October 13, 2016 16:08
Show Gist options
  • Save unclechu/a968e039a56b075c5845695508f61a63 to your computer and use it in GitHub Desktop.
Save unclechu/a968e039a56b075c5845695508f61a63 to your computer and use it in GitHub Desktop.
webpack config example
{
"main": "app/index.html",
"scripts": {
"webpack": "node_modules/.bin/webpack",
"webpack-dev-server": "node_modules/.bin/webpack-dev-server",
"clean": "rm -rf ./app/",
"bundle": "env NODE_ENV=development webpack --progress --colors",
"bundleprod": "env NODE_ENV=production webpack --progress --colors",
"devserver": "npm run clean && env NODE_ENV=development webpack-dev-server --progress --colors --inline --open --host localhost --port 8000 --watch",
"rebuild": "npm run clean && npm run bundle",
"rebuildprod": "npm run clean && npm run bundleprod",
"postinstall": "npm run rebuildprod"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"css-loader": "^0.25.0",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"node-sass": "^3.10.0",
"pug": "^2.0.0-beta6",
"pug-loader": "^2.3.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
},
"dependencies": {
"animate.css": "^3.5.2",
"jquery-nice-select": "^1.1.0",
"node.normalize.scss": "^3.0.3",
"slick-carousel": "^1.6.0"
}
}
"use strict";
/*jshint esversion: 6 */
/*jshint node: true */
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require("path");
const BASE_DIR = __dirname;
const pages = ["index", "about"];
const extractCss = new ExtractTextPlugin("[name]-build.css", {
allChunks: true
});
module.exports = {
devtool: "source-map",
entry: {
"app": path.resolve(BASE_DIR, "scripts", "main.js"),
"vendor": [
"jquery",
"jquery-nice-select",
"slick-carousel"
]
},
resolve: {
alias: {
"js": path.resolve(BASE_DIR, "scripts"),
"tpl": path.resolve(BASE_DIR, "templates"),
"styles": path.resolve(BASE_DIR, "styles"),
"img": path.resolve(BASE_DIR, "assets", "img")
},
extensions: ["", ".js", ".sass", ".pug"]
},
output: {
publicPath: "/",
path: path.join(BASE_DIR, "app"),
filename: "[name]-build.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ["es2015"]
}
},
{
test: /\.sass$/,
loader: extractCss.extract(["css", "autoprefixer?browsers=last 2 versions", "resolve-url", "sass?sourceMap"])
},
{
test: /\.pug$/,
loader: "pug?pretty",
},
{
test: require.resolve('jquery'),
loaders: ["expose?$", "expose?jQuery"]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpe?g)$/,
loader: 'file?name=[path][name]-[hash:7].[ext]',
}
]
},
devServer: {
contentBase: path.resolve(BASE_DIR, "app")
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["app", "vendor"],
minChunks: Infinity
}),
extractCss
].concat(
(process.env.NODE_ENV === "production")?
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
unsafe: true
}
}): []
).concat(
pages.map(page =>
new HtmlWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(BASE_DIR, "templates", `${page}.pug`)
})
)
)
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment