Created
November 12, 2018 23:53
-
-
Save rogerluiz/7e1d0869fda2f6b3645249a963d67f5b to your computer and use it in GitHub Desktop.
Webpack config
This file contains hidden or 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 HtmlWebPackPlugin = require('html-webpack-plugin'); | |
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
| const htmlWebpackPlugin = new HtmlWebPackPlugin({ | |
| template: './public/index.html', | |
| filename: './index.html' | |
| }); | |
| module.exports = { | |
| entry: { | |
| bundle: [ | |
| '@babel/polyfill', | |
| './src/index.js' | |
| ] | |
| }, | |
| resolve: { | |
| extensions: ['.js', '.jsx', '.json', '.scss', '.css'], | |
| alias: { | |
| modules: __dirname + '/node_modules', | |
| static: __dirname + '/public' | |
| } | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /.js[x]?$/, | |
| exclude: [/node_modules/, /[\\/]tests[\\/]/], | |
| use: { | |
| loader: "babel-loader", | |
| query: { | |
| presets: ['@babel/preset-env', '@babel/preset-react'], | |
| plugins: [ | |
| '@babel/plugin-proposal-object-rest-spread', | |
| '@babel/plugin-syntax-dynamic-import', | |
| '@babel/plugin-proposal-class-properties', | |
| '@babel/plugin-proposal-export-namespace-from', | |
| '@babel/plugin-proposal-throw-expressions' | |
| ] | |
| } | |
| } | |
| }, | |
| { | |
| test: /\.html$/, | |
| use: [ | |
| { | |
| loader: 'html-loader', | |
| options: { minimize: true } | |
| } | |
| ] | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: [ | |
| { | |
| loader: MiniCssExtractPlugin.loader, | |
| options: { | |
| publicPath: '../', | |
| }, | |
| }, | |
| { | |
| loader: 'css-loader', | |
| options: { | |
| modules: true, | |
| importLoaders: 1, | |
| sourceMap: true, | |
| minimize: true | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| test: /\.(ttf|eot|woff|woff2|svg)$/, | |
| use: { | |
| loader: 'url-loader', | |
| options: { | |
| name: '[name].[ext]', | |
| outputPath: 'build/fonts/', | |
| publicPath: '../' | |
| }, | |
| }, | |
| }, | |
| { | |
| test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, | |
| loader: 'url-loader', | |
| options: { | |
| limit: -1, | |
| name: '[name].[hash:8].[ext]', | |
| outputPath: 'build/images/' | |
| // publicPath: '../' | |
| } | |
| }, | |
| ] | |
| }, | |
| optimization: { | |
| splitChunks: { | |
| cacheGroups: { | |
| styles: { | |
| name: 'styles', | |
| test: /\.css$/, | |
| chunks: 'all', | |
| enforce: true | |
| } | |
| } | |
| } | |
| }, | |
| plugins: [ | |
| htmlWebpackPlugin | |
| ] | |
| }; |
This file contains hidden or 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
| module.exports = env => { | |
| return require(`./webpack.${env}.js`); | |
| }; |
This file contains hidden or 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 webpack = require('webpack'); | |
| const merge = require('webpack-merge'); | |
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
| const package = require('../package.json'); | |
| const baseConfig = require('./webpack.common'); | |
| const miniCssExtractPlugin = new MiniCssExtractPlugin({ | |
| filename: "[name].[hash:8].css", | |
| chunkFilename: "id].[hash:8].css" | |
| }); | |
| module.exports = merge(baseConfig, { | |
| entry: { | |
| bundle: [ | |
| 'webpack/hot/dev-server' | |
| ] | |
| }, | |
| output: { | |
| path: __dirname + '/public', | |
| filename: 'src/[name].[hash:8].js', | |
| chunkFilename: 'src/[name].[hash:8].js' | |
| }, | |
| devtool: 'inline-source-map', | |
| devServer: { | |
| hot: true, | |
| port: 3000, | |
| compress: true, | |
| historyApiFallback: true, | |
| contentBase: './public', | |
| overlay: { | |
| warnings: true, | |
| errors: true | |
| }, | |
| proxy: { | |
| '/api': package.server.proxy | |
| }, | |
| headers: { | |
| 'Access-Control-Allow-Origin': '*', | |
| 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept' | |
| } | |
| }, | |
| plugins: [ | |
| miniCssExtractPlugin, | |
| new webpack.HotModuleReplacementPlugin() | |
| ] | |
| }); |
This file contains hidden or 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 merge = require('webpack-merge'); | |
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); | |
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
| const baseConfig = require('./webpack.common'); | |
| const miniCssExtractPlugin = new MiniCssExtractPlugin({ | |
| filename: "css/[name].[hash:8].css", | |
| chunkFilename: "css/[id].[hash:8].css" | |
| }); | |
| module.exports = merge(baseConfig, { | |
| output: { | |
| path: __dirname + '/build', | |
| filename: 'js/[name].[hash:8].js', | |
| chunkFilename: 'js/[name].[hash:8].js' | |
| }, | |
| optimization: { | |
| runtimeChunk: 'single', | |
| splitChunks: { | |
| cacheGroups: { | |
| vendor: { | |
| test: /[\\/]node_modules[\\/]/, | |
| name: 'vendors', | |
| chunks: 'all' | |
| } | |
| } | |
| }, | |
| minimizer: [new UglifyJsPlugin()], | |
| }, | |
| plugins: [ | |
| miniCssExtractPlugin | |
| ] | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment