Skip to content

Instantly share code, notes, and snippets.

@tinyjin
Created September 4, 2018 00:37
Show Gist options
  • Save tinyjin/1167936a33c03ac1e81b67d1441b48dc to your computer and use it in GitHub Desktop.
Save tinyjin/1167936a33c03ac1e81b67d1441b48dc to your computer and use it in GitHub Desktop.
The webpack.config.js example for using HTML/CSS/JS web app.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './scripts/app.js',
},
output: {
filename: 'bundle.[name].js',
path: path.resolve(__dirname, './')
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './pages/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}, {
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
options: {
publicPath: './assets/images/',
outputPath: './',
name: '[name].[ext]?[hash]'
}
}, {
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]?[hash]',
publicPath: './',
limit: 10000
}
}
},
]
},
devtool: 'source-map',
mode: 'development', // If release , change mode to 'production'
devServer: {
contentBase: './'
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment