Last active
February 1, 2022 10:18
-
-
Save danielwrobert/cac4a4a44f1430339861 to your computer and use it in GitHub Desktop.
Example Webpack Config File
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 MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
module.exports = ( env, options ) => { | |
return { | |
entry: './src/block.js', | |
output: { | |
path: path.resolve( __dirname, 'build' ), | |
filename: 'block.js', | |
}, | |
devtool: 'cheap-eval-source-map', | |
module: { | |
rules: [ | |
{ | |
test: /\.jsx$|\.es6$|\.js$/, | |
use: { | |
loader: 'babel-loader', | |
options: { | |
presets: ['react'], | |
} | |
}, | |
exclude: /(node_modules|bower_components)/ | |
}, | |
{ | |
test: /\.css$/, | |
use: [ | |
MiniCssExtractPlugin.loader, | |
{ | |
loader: 'css-loader', | |
options: { | |
importLoaders: 1, | |
minimize: ( options.mode == 'production' ? true : false ), | |
sourceMap: true, | |
} | |
}, | |
{ | |
loader: 'postcss-loader', | |
options: { | |
plugins: [ require( 'autoprefixer' ) ] | |
} | |
}, | |
], | |
}, | |
{ | |
test: /\.(png|jpg|gif)$/, | |
use: [ | |
{ | |
loader: 'file-loader', | |
options: { | |
name: '[name].[ext]', | |
outputPath: 'images/' | |
} | |
} | |
] | |
}, | |
], | |
}, | |
plugins: [ | |
new MiniCssExtractPlugin({ | |
filename: 'style.css', | |
chunkFilename: '[id].css' | |
}) | |
], | |
} | |
}; |
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 ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); | |
const autoprefixer = require( 'autoprefixer' ); | |
const precss = require( 'precss' ); | |
const svgFragments = require( 'postcss-svg-fragments' ); | |
const pxtorem = require( 'postcss-pxtorem' ); | |
const cssnano = require( 'cssnano' ); | |
const path = require( 'path' ); | |
module.exports = { | |
entry: { | |
app: [ | |
'webpack-dev-server/client?http://localhost:8881/', | |
'./app/App.js' | |
] | |
}, | |
output: { | |
path: path.resolve( __dirname, 'public' ), | |
publicPath: '/js/', | |
filename: 'main.js', | |
sourceMapFilename: 'main.js.map' | |
}, | |
resolve: { | |
extensions: ['', '.js', '.jsx', '.es6'], | |
modulesDirectories: ['node_modules'] | |
}, | |
module: { | |
preloaders: [ | |
{ test: /\.jsx$|\.es6$|\.js$/, loader: 'source-map', query: { presets: ['react', 'es2015'] }, exclude: /(node_modules|bower_components)/ } | |
], | |
loaders: [ | |
{ test: /\.jsx$|\.es6$|\.js$/, loader: 'babel', query: { presets: ['react', 'es2015'] }, exclude: /(node_modules|bower_components)/ }, | |
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') }, | |
{ test: /.*\.(gif|png|jpe?g|svg)$/i, loaders: ['file?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=5'] } | |
] | |
}, | |
devtool: "eval", | |
postcss: function() { | |
return [ | |
autoprefixer( { browsers: ['last 2 versions'] } ), | |
precss, | |
svgFragments, | |
cssnano, | |
pxtorem( { | |
propWhiteList: [] // Enables converting of all properties - default is just font sizes. | |
} ) | |
]; | |
}, | |
plugins: [ | |
new ExtractTextPlugin( 'public/styles.css', { | |
allChunks: true | |
} ) | |
] | |
}; |
Which version of webpack is this?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Dependencies and Configuration (Latest - v4+)
I created this configuration when developing Gutenberg blocks in WordPress. The setup, however, is still pretty versatile and should be able to be dropped in a project and tweaked to fit that environment and your preferences. Depending on your project requirements, you may want to remove/replace the
@wordpress/babel-preset-default
package (listed below). See package contents for details.Installation
To install the necessary modules/dependencies to run the following command:
npm i -D @wordpress/babel-preset-default babel-core babel-eslint babel-loader babel-preset-react classnames cross-env css-loader eslint file-loader mini-css-extract-plugin postcss-loader style-loader webpack webpack-cli
Then add the following scripts to your
package.json
file:With that, you can use
npm run dev
to watch your files in development or usenpm run build
to minify everything for production.If you're not using
@wordpress/babel-preset-default
, you will also want to usebabel-preset-env
, along withbabel-preset-react
. So you wouldnpm install --save-dev babel-preset-env
and then in your "presets" definition (on line 23), you'd have"presets": ["env", "react"]
, instead of just "react". Not shown in the above example file because@wordpress/babel-preset-default
includes this (along withbabel-plugin-transform-async-generator-functions
,babel-plugin-transform-object-rest-spread
,babel-plugin-transform-react-jsx
,babel-plugin-transform-runtime
).