))
Webpack 4 NodeJS
Manage episode 206601192 series 2291908
Content provided by Paul Sherer and Nick Kaufmann, Paul Sherer, and Nick Kaufmann. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Paul Sherer and Nick Kaufmann, Paul Sherer, and Nick Kaufmann or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.
This weeks episode dives in to Webpack 4 release, how EASY it is, and what you can do to get started.
https://github.com/webpack/webpack
example:
…
continue reading
https://github.com/webpack/webpack
example:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const PATHS = {
app: path.join(__dirname, 'src'),
dist: path.join(__dirname, 'dist'),
};
mode: "production", module.exports = {
devtool: "source-map",
entry: {
app: PATHS.app
},
output: {
path: PATHS.dist,
filename: "[name].js",
publicPath: "/"
},
devServer: {
open: true,
compress: true,
historyApiFallback: true,
contentBase: "dist"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// Could also be write as follow:
// use: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
use: [
{
loader: "css-loader",
query: {
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
},
"postcss-loader"
]
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
},
{
test: /\.(png|jpe?g|gif|svg|ttf|eot|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {
// path where the images will be saved
name: "assets/[name].[ext]"
}
},
{
loader: "image-webpack-loader",
options: {
mozjpeg: {
quality: 65
},
pngquant: {
quality: "10-20",
speed: 4
},
svgo: {
plugins: [
{
removeViewBox: false
},
{
removeEmptyAttrs: false
}
]
},
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7,
interlaced: false
}
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin([PATHS.dist]),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/public", "index.html"),
favicon: "src/public/images/fav.png",
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
ecma: 8,
compress: {
warnings: false,
drop_console: true
},
output: {
comments: false,
beautify: false
},
warnings: false
}
}),
new webpack.optimize.AggressiveMergingPlugin(), //Merge chunks
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new CopyWebpackPlugin([
{ from: PATHS.app + "/public/static", to: PATHS.dist }, // Copy everything from src/public/static to dist folder
// { from: require.resolve("workbox-sw"), to: "workbox-sw.prod.js" }
]),
// new WorkboxPlugin({
// globDirectory: "./dist/",
// globPatterns: ["**/*.{html,js,css,png,jpg}"],
// swSrc: "./src/client/sw.js",
// swDest: "./dist/service-worker.js"
// })
]
}
18 episodes
Share
