###Basic Wepback Example showing the use of
- html-webpack-plugin
- templates with webpack
- extract text plugin
- other webpack related techniques
####Extracting CSS
If we'd want to extract all the css instead of inlining it (say, because of a flash of unstyled content (FOUC))and have it placed into a style.css file to be embedded into our index.html, in our webpack.config.js, we'd wrap the css block in ExtractTextPlugin
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
include: PATHS.app
}
]
},
Then in the plugins block of webpack.config.js, we call new ExtractTextPlugin(), passing either just a name style.css
or style-[hash].css
, if we want Webpack to automatically fingerprint the file with a unique hash:
plugins: [
new ExtractTextPlugin("style-[hash].css", {
allChunks: true
}),
The general approach is not to use ExtractTextPlugin during development, as it will not work with Hot Module Replacement, but instead, use it during production.
If fingerprinting, it would be a good idea to use 'clean-webpack-plugin' to clean the build directory, as these uniquely stamped fingerprinted files will accumulate.
####TODO: it would be useful to be able to pull in large svg files into a template or index.html at build time.
####To run:
npm install
npm run build
in another terminal tab: npm run start