Created
October 2, 2018 21:12
-
-
Save cgpro/7103cb6f71fec845d7c42c82acc75d38 to your computer and use it in GitHub Desktop.
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
| const path = require('path') | |
| const webpack = require('webpack') | |
| const HtmlWebpackPlugin = require('html-webpack-plugin') | |
| const ExtractCssChunks = require("extract-css-chunks-webpack-plugin") | |
| const CopyWebpackPlugin = require('copy-webpack-plugin') | |
| const autoprefixer = require('autoprefixer') | |
| const fs = require('fs') | |
| const BrowserSyncPlugin = require('browser-sync-webpack-plugin') | |
| const isDevelopment = process.env.NODE_ENV !== 'production' | |
| function generateHtmlPlugins (templateDir) { | |
| // Read files in template directory | |
| const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir)) | |
| return templateFiles.map(item => { | |
| // Split names and extension | |
| const parts = item.split('.') | |
| const name = parts[0] | |
| const extension = parts[1] | |
| // Create new HTMLWebpackPlugin with options | |
| return new HtmlWebpackPlugin({ | |
| filename: `${name}.html`, | |
| template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`), | |
| minify: !isDevelopment && { | |
| html5: true, | |
| collapseWhitespace: false, | |
| caseSensitive: false, | |
| removeComments: false, | |
| removeEmptyElements: false, | |
| }, | |
| }) | |
| }) | |
| } | |
| // Call our function on our views directory. | |
| const htmlPlugins = generateHtmlPlugins('./pages') | |
| module.exports = { | |
| mode: 'development', | |
| entry: { | |
| bundle: './src/js/app.js', | |
| }, | |
| stats: { | |
| children: false, | |
| }, | |
| output: { | |
| path: path.resolve(__dirname, './dist'), | |
| filename: './src/bundle.js' // JS output path | |
| }, | |
| devtool: isDevelopment && 'source-map', | |
| devServer: { | |
| host: '0.0.0.0', | |
| port: 8000, | |
| open: false, | |
| contentBase: path.join(__dirname, '.'), | |
| }, | |
| watchOptions: { | |
| poll: true, | |
| ignored: '/node_modules/', | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.hbs/, | |
| loader: 'handlebars-loader', | |
| }, | |
| { | |
| test: /\.js$/, | |
| exclude: /node_modules/, | |
| use: { | |
| loader: 'babel-loader', | |
| options: { | |
| presets: ['@babel/preset-env'] | |
| } | |
| } | |
| }, | |
| { | |
| test: /\.(scss|css)$/, | |
| use: [ExtractCssChunks.loader, | |
| { | |
| loader: 'css-loader', | |
| options: { | |
| importLoaders: 2, | |
| modules: true, | |
| minimize: true | |
| } | |
| }, | |
| { | |
| loader: "postcss-loader", | |
| options: { | |
| autoprefixer: { | |
| browsers: ["last 2 versions"] | |
| }, | |
| plugins: () => [ | |
| autoprefixer | |
| ] | |
| }, | |
| }, | |
| { | |
| loader: "sass-loader", | |
| options: {} | |
| } | |
| ], | |
| }, | |
| { | |
| test: /\.(jpg|png|gif)$/, | |
| include: path.resolve('./img/'), | |
| use: [ | |
| { | |
| loader: 'file-loader', | |
| options: { | |
| outputPath: 'dist/img/', | |
| name: 'img/[name].[ext]', | |
| publicPath: '/' | |
| }, | |
| }, | |
| { | |
| loader: 'image-webpack-loader', | |
| options: { | |
| mozjpeg: { | |
| progressive: true, | |
| quality: 65, | |
| }, | |
| optipng: { | |
| enabled: true, | |
| }, | |
| pngquant: { | |
| quality: '65-90', | |
| speed: 4, | |
| }, | |
| gifsicle: { | |
| interlaced: false, | |
| }, | |
| webp: { | |
| quality: 75, | |
| }, | |
| }, | |
| }, | |
| ], | |
| }, | |
| { | |
| test: /\.(ttf|eot|woff|woff2|svg)$/, | |
| loader: 'file-loader', | |
| include: path.resolve('./src/fonts/'), | |
| options: { | |
| outputPath: 'dist/fonts/', | |
| name: '[name].[ext]', | |
| publicPath: '/' | |
| } | |
| }, | |
| ], | |
| }, | |
| plugins: [ | |
| new webpack.LoaderOptionsPlugin({ | |
| options: { | |
| handlebarsLoader: {}, | |
| }, | |
| }), | |
| new ExtractCssChunks({ | |
| filename: '[name].css', | |
| chunkFilename: '[id].css', | |
| hot: true | |
| }), | |
| new webpack.ProvidePlugin({ | |
| $: "jquery", | |
| jQuery: "jquery" | |
| }), | |
| new CopyWebpackPlugin([ | |
| {from:'./src/img',to:'img'} | |
| ]), | |
| new BrowserSyncPlugin({ | |
| // browse to http://localhost:3000/ during development, | |
| // ./public directory is being served | |
| host: '0.0.0.0', | |
| port: 8000, | |
| files: ['./pages/*.hbs'], | |
| server: { baseDir: ['src/dist'] } | |
| }) | |
| ] | |
| .concat(htmlPlugins) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment