Last active
January 30, 2018 15:05
-
-
Save yanai101/84d14657d2bd6ffd64c9fbeacf7fd194 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 webpack = require("webpack"); | |
| const path = require("path"); | |
| const HtmlWebpackPlugin = require("html-webpack-plugin"); | |
| const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
| const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin"); | |
| const Hot = webpack.HotModuleReplacementPlugin; | |
| const NamedPlugin = webpack.NamedModulesPlugin; | |
| module.exports = (env = {}) => { | |
| return { objectGoesHere }; | |
| }; | |
| // paths | |
| const projectPath = path.resolve(__dirname, ".."); | |
| const buildPath = path.join(projectPath, "build"); | |
| const srcPath = path.join(projectPath, "src"); | |
| const appPath = path.join(srcPath, "app"); | |
| const publicUrl = ""; | |
| const cssModuls = true; | |
| module.exports = env => { | |
| const isProd = env && env.production ? true : false; | |
| const cssDev = cssModuls? ExtractTextPlugin.extract({ | |
| fallback: "style-loader", | |
| use: [ | |
| { | |
| loader: "css-loader", | |
| options: { | |
| minimize: true, | |
| module: true, | |
| importLoaders: 2, // make sure sass-loader is used on imported assets | |
| localIdentName: "[local]__[hash:base64:5]", | |
| publicPath: "/dist" | |
| } | |
| }, | |
| "sass-loader" | |
| ] | |
| }) | |
| : | |
| ["style-loader", "css-loader", "sass-loader"]; | |
| const cssProd = ExtractTextPlugin.extract({ | |
| use: [ | |
| { | |
| loader: "css-loader", | |
| options: { | |
| minimize: true, | |
| module: true, | |
| importLoaders: 1, // make sure sass-loader is used on imported assets | |
| localIdentName: "[local]__[hash:base64:5]", | |
| publicPath: "/dist" | |
| } | |
| }, | |
| "sass-loader" | |
| ] | |
| }); | |
| const minifyProd = { | |
| removeComments: true, | |
| collapseWhitespace: true, | |
| removeRedundantAttributes: true, | |
| useShortDoctype: true, | |
| removeEmptyAttributes: true, | |
| removeStyleLinkTypeAttributes: true, | |
| keepClosingSlash: true, | |
| minifyJS: true, | |
| minifyCSS: true, | |
| minifyURLs: true | |
| }; | |
| const cssConfig = isProd? cssProd : cssDev; | |
| const sourceMapConfig = isProd ? "" : "source-map"; | |
| const htmlMinityConfilg = isProd ? minifyProd : {}; | |
| const publicPath = isProd ? "" : "/"; | |
| return { | |
| entry: "./src/index.tsx", | |
| output: { | |
| path: buildPath, | |
| filename: "bundle.js", | |
| publicPath: publicPath | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.tsx?$/, | |
| use: "awesome-typescript-loader" | |
| }, | |
| { | |
| enforce: "pre", | |
| test: /\.js$/, | |
| use: "source-map-loader" | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: ["style-loader", "css-loader"] | |
| }, | |
| { | |
| test: /\.scss$/, | |
| use: cssConfig | |
| }, | |
| { | |
| test: /\.(png|jpe?g|gif|svg)$/, | |
| include: projectPath, | |
| use: [ | |
| "url-loader?name=images/[name].[ext]", | |
| "image-webpack-loader?bypassOnDebug" | |
| ] | |
| }, | |
| { | |
| test: /\.(woff2?)$/, | |
| use: "url-loader?limit=10000&name=fonts/[name].[ext]" | |
| }, | |
| { | |
| test: /\.(ttf|eot)$/, | |
| use: "file-loader?name=fonts/[name].[ext]" | |
| } | |
| ] | |
| }, | |
| plugins: [ | |
| new InterpolateHtmlPlugin({ | |
| PUBLIC_URL: publicUrl | |
| }), | |
| new HtmlWebpackPlugin({ | |
| template: "./index.html", | |
| hash: true, | |
| minify: htmlMinityConfilg | |
| }), | |
| new webpack.DefinePlugin({ | |
| NODE_ENV: JSON.stringify(process.env.NODE_ENV) | |
| }), | |
| new Hot(), | |
| new NamedPlugin(), | |
| new ExtractTextPlugin({ | |
| filename: "style.css", | |
| // disable: !isProd, | |
| allChunks: true | |
| }) | |
| ], | |
| devtool: sourceMapConfig, | |
| devServer: { | |
| contentBase: buildPath, | |
| historyApiFallback: { | |
| disableDotRule: true | |
| }, | |
| compress: true, | |
| hot: true, | |
| open: true, | |
| stats: "minimal" | |
| }, | |
| resolve: { | |
| extensions: [".js", ".ts", ".tsx", ".css"] | |
| } | |
| }; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment