Related
I've never used Webpack before and I'm working on a project that's just vanilla JS and HTML. I'm having an issue accessing the values I set in .env. Here's my config.
const path = require("path");
const dotenv = require('dotenv');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = () => {
env = dotenv.config().parsed;
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});
return {
entry: {
main: './src/index.js'
},
output: {
path: path.join(__dirname, '../build'),
filename: '[name].bundle.js'
},
mode: 'development',
devServer: {
contentBase: "./src/",
publicPath: "./src/",
compress: true,
port: 9000,
overlay: true,
disableHostCheck: true
},
devtool: 'inline-source-map',
resolve: {
alias: {
process: "process/browser"
}},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/'
}
}
]
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
//attributes: ['img:src', ':data-src'],
minimize: true
}
}
}
]
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new Dotenv(),
new webpack.DefinePlugin(envKeys),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
}),
]
}
};
As you can see, I'm using dotEnv, definePlugin, and even the dotEnv-webpack plugin. Unfortunately, none of these solutions seem to allow me to access process.env.originURL.
originURL=https://localhost:3000
I'm not importing or requiring anything in my javascript file, index.js. I'm assuming this should work, but the console tells me that process is undefined.
console.log(process.env.originURL);
How can I access process.env.originURL in my index.js?
It should work. Maybe you could try this version:
new Dotenv({ systemvars: true })
If it still doesn't work, please show your package.json, as well as you .env file (randomize the values of course). Is .env at the root of you app?
Im new to react.js and currently working on a react.js project which runs 100% ok with development environment without any errors. After i build the project in production mode it will not minify my javascript files. But my scss files are get minified.
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "production",
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js",
},
output: {
filename: "[name].[contentHash].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs",
},
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
},
}),
],
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
new CleanWebpackPlugin(),
],
};
Please someone help me to solve this problem and sorry for my bad English.
The default javascript minimizer plugin for webpack is TerserPlugin. When you setting minimizer attribute under the optimizaton, it will override the default values provided by webpack itself. To overcome this problem add TerserPlugin to your webpack.config.js file and pass it to the minimizer attribute.
const TerserPlugin = require("terser-webpack-plugin");
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCssAssetsPlugin(),
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
},
}),
],
},
It seems like you only have minimization for your scss files, if you want to minify your javascript files aswell, you'll need a plugin such as Uglify, you just import it on the top and add it to the optimization.minimizer like it says in plugin page example:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
MiniCssExtractPlugin will extract your CSS into a separate file and It creates a CSS file per JS file which contains CSS. It won't minify your CSS files.
Import css-minimizer-webpack-plugin for minification. You can configure minification based on your environment.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { getIfUtils } = require('webpack-config-utils')
const {ifProduction, ifNotProduction} = getIfUtils(process.env.NODE_ENV)
module.exports = {
module: {
loaders: [
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
optimization: {
minimize: ifProduction(true, false),
minimizer: [
new CssMinimizerPlugin(),
],
},
};
Been trying to research this but it doesn't seem as if any else has this, or see this as an issue.
I am using mini-css-extract-plugin(MiniCssExtractPlugin) in my webpack.config.js.
However, when I run webpack the console is littered with hundreds of instances of something similar to this...
Child mini-css-extract-plugin ../../../node_modules/css-loader/index.js??ref--6-1!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!ui/radiolist-toggler/RadioListToggler.scss:
Entrypoint mini-css-extract-plugin = *
[../../../node_modules/css-loader/index.js?!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss] /Users/~~~/git/user-section/node_modules/css-loader??ref--6-1!/Users/~~~/git/user-section/node_modules/postcss-loader/src!/Users/~~/git/user-section/node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss 5.33 KiB {mini-css-extract-plugin} [built]
+ 1 hidden module
I need to scroll up for a good few seconds to be able to see all my assets etc.
I am pretty new to webpack, so not exactly sure how to prevent this from being output to the console?
Below is my webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const modernizr = require("modernizr");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, 'src/main/client'),
entry: './index',
devtool: 'cheap-module-source-map',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
mangle: true,
compress: true,
ecma: 6
},
sourceMap: true
}),
new OptimizeCssAssetsPlugin({}),
],
splitChunks: {
chunks: 'all'
}
},
plugins: [
new CompressionPlugin({
test: /\.js$|\.css$|\.html$|\.(png|svg|jpg|gif)$/,
cache: true,
filename: '[path].gz[query]',
algorithm: 'gzip',
threshold: 10240
}),
new CleanWebpackPlugin([
'./target/webapp'
]),
new HtmlWebpackPlugin({
template: './index.html',
filename: '../index.html',
xhtml: true
}),
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new CopyWebpackPlugin([{
from: '../webapp/**/*',
to: '../'
}]),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
],
output: {
publicPath: '/app/',
filename: '[name].bundle.js',
chunkFilename: '[id].js',
path: path.resolve(__dirname, 'target/webapp/app/')
},
module: {
rules: [{
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/
},
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: 'html-loader'
}
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets/fonts/'
}
}]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["#babel/env"]
}
}
],
},
resolve: {
alias: {
// You can add comment "Please do not delete this file" in this file
modernizr$: path.resolve(__dirname, "./.modernizrrc.js")
}
}
}
#mcclosa mentioned this as a comment but in case anyone should look at this question, see no answer and click away, the solution is to add the stats option to your webpack.config.js file as follows:
module.exports = {
stats: { children: false },
}
The above option uses the children: false option suggested by #mcclosa, which does successfully remove the junk output by mini-css-extract-plugin, but I find using the preset stats: "minimal" produces a much nicer overall output. Using:
module.exports = {
stats: "minimal",
}
..gives me the following tiny output whenever my build has no errors:
i ｢wdm｣: Compiling...
i ｢wdm｣: 69 modules
i ｢wdm｣: Compiled successfully.
..as opposed to dozens of lines of useless build data, but it will continue to give give error information when errors are present.
Unfortunately, mini-css-extract-loader does not have a setting to control the verbosity of its log output.
Setting stats.children to false or "minimal" in your webpack.config.js can remove a lot of other useful output like your bundle names and sizes, entry point information, time taken to build, legitimate warnings and errors from other plugins that you may want to keep, etc.
Instead it seems that we must add a plugin that executes on the compiler's done hook to remove items from the stats.compilation object associated with mini-css-extract-plugin.
This example plugin should work:
class CleanupMiniCssExtractPlugin {
apply(compiler) {
compiler.hooks.done.tap("CleanupMiniCssExtractPlugin", stats => {
if (this._children) {
const children = stats.compilation.children;
if (Array.isArray(children)) {
stats.compilation.children = children.filter(
child => child.name.indexOf("mini-css-extract-plugin") == -1
);
}
}
});
}
}
Or you can use this npm package: https://www.npmjs.com/package/cleanup-mini-css-extract-plugin
I am trying to integrate Creative Tim's Material Kit Pro React frontend with the generator for the backend provided here
I generated a material ui react app using the back end yo generator. I then installed the additional dependencies specified in the Creative Tim file. At that point, I get an error. SCSS files that previously loaded in the original app now throw an error that says:
Uncaught Error: Cannot find module "./LoadingSpinner.scss"
at webpackMissingModule (LoadingSpinner.js:4)
I have copied both webpack.config.js files but they are so different, I can't get a grip on where to start integrating them.
Has anyone tried to use both packages?
Material Kit Pro React webpack.config.js has:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
if (process.env.NODE_ENV === 'test') {
require('dotenv').config({ path: '.env.test'});
} else if (process.env.NODE_ENV === 'development') {
require('dotenv').config({ path: '.env.development'});
}
module.exports = (env) => {
const isProduction = env ==='production';
const CSSExtract = new ExtractTextPlugin('styles.css');
return {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
// resolve: { alias: { Assets: path.resolve(__dirname, 'src/assets') } },
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}]
},
plugins: [
CSSExtract,
new webpack.DefinePlugin({
'process.env.REACT_APP_FIREBASE_API_KEY': JSON.stringify(process.env.REACT_APP_FIREBASE_API_KEY),
'process.env.REACT_APP_FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.REACT_APP_FIREBASE_AUTH_DOMAIN),
'process.env.REACT_APP_FIREBASE_DATABASE_URL': JSON.stringify(process.env.REACT_APP_FIREBASE_DATABASE_URL),
'process.env.REACT_APP_FIREBASE_PROJECT_ID': JSON.stringify(process.env.REACT_APP_FIREBASE_PROJECT_ID),
'process.env.REACT_APP_FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.REACT_APP_FIREBASE_STORAGE_BUCKET),
'process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID)
})
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist/'
}
};
};
Backend generator has:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const project = require('../project.config')
const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = file => inProject(project.srcDir, file)
const __DEV__ = project.env === 'development'
const __TEST__ = project.env === 'test'
const __PROD__ = project.env === 'production'
const config = {
entry: {
normalize: [inProjectSrc('normalize')],
main: [inProjectSrc(project.main)]
},
devtool: project.sourcemaps ? 'source-map' : false,
output: {
path: inProject(project.outDir),
filename: __DEV__ ? '[name].js' : '[name].[chunkhash].js',
publicPath: project.publicPath
},
resolve: {
modules: [inProject(project.srcDir), 'node_modules'],
extensions: ['*', '.js', '.jsx', '.json']
},
externals: project.externals,
module: {
rules: []
},
plugins: [
new webpack.DefinePlugin(
Object.assign(
{
'process.env': { NODE_ENV: JSON.stringify(project.env) },
__DEV__,
__TEST__,
__PROD__
},
project.globals
)
)
],
node: {
// disable node constants so constants.js file is used instead (see https://webpack.js.org/configuration/node/)
constants: false
}
}
// JavaScript
// ------------------------------------
config.module.rules.push({
test: /\.(js|jsx)$/,
exclude: [
/node_modules/,
/redux-firestore\/es/,
/react-redux-firebase\/es/
// Add other packages that you are npm linking here
],
use: [
{
loader: 'babel-loader',
query: {
cacheDirectory: true,
// ignore root .babelrc (Check issue #59 for more details)
babelrc: false,
plugins: [
'lodash',
'transform-decorators-legacy',
'babel-plugin-transform-class-properties',
'babel-plugin-syntax-dynamic-import',
'babel-plugin-transform-export-extensions',
[
'babel-plugin-transform-runtime',
{
helpers: true,
polyfill: false, // we polyfill needed features in src/normalize.js
regenerator: true
}
],
[
'babel-plugin-transform-object-rest-spread',
{
useBuiltIns: true // we polyfill Object.assign in src/normalize.js
}
]
],
presets: [
'babel-preset-react',
[
'babel-preset-env',
{
targets: {
ie9: true,
uglify: true,
modules: false
}
}
]
]
}
}
]
})
// Styles
// ------------------------------------
const extractStyles = new ExtractTextPlugin({
filename: 'styles/[name].[contenthash].css',
allChunks: true,
disable: __DEV__
})
config.module.rules.push({
test: /\.(sass|scss)$/,
loader: extractStyles.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: project.sourcemaps,
modules: true,
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64:5]',
minimize: {
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: project.sourcemaps
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: project.sourcemaps,
includePaths: [inProjectSrc('styles')]
}
}
]
})
})
config.plugins.push(extractStyles)
// Images
// ------------------------------------
config.module.rules.push({
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 8192
}
})
// Fonts
// ------------------------------------
;[
['woff', 'application/font-woff'],
['woff2', 'application/font-woff2'],
['otf', 'font/opentype'],
['ttf', 'application/octet-stream'],
['eot', 'application/vnd.ms-fontobject'],
['svg', 'image/svg+xml']
].forEach(font => {
const extension = font[0]
const mimetype = font[1]
config.module.rules.push({
test: new RegExp(`\\.${extension}$`),
loader: 'url-loader',
options: {
name: 'fonts/[name].[ext]',
limit: 10000,
mimetype
}
})
})
// HTML Template
// ------------------------------------
config.plugins.push(
new HtmlWebpackPlugin({
template: inProjectSrc('index.html'),
inject: true,
minify: {
collapseWhitespace: true
}
})
)
// Development Tools
// ------------------------------------
if (__DEV__) {
config.entry.main.push(
`webpack-hot-middleware/client.js?path=${
config.output.publicPath
}__webpack_hmr`
)
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
)
}
// Bundle Splitting
// ------------------------------------
if (!__TEST__) {
const bundles = ['normalize', 'manifest']
if (project.vendors && project.vendors.length) {
bundles.unshift('vendor')
config.entry.vendor = project.vendors
}
config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({ names: bundles })
)
}
// Production Optimizations
// ------------------------------------
if (__PROD__) {
config.plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: !!config.devtool,
comments: false,
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
}
})
)
}
module.exports = config
I can see the css loaders are different, but I can't see what to do to make the Creative Tim files work with this backend. Has anyone figured this out?
I have tried adding tests to the module exports statement in the generator so that it reads as follows:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
// options: {
// includePaths: ["absolute/path/a", "absolute/path/b"]
// }
}],
}],
},
That attempt produces a new error that reads:
web.dom.iterable.js:19 Uncaught Error: Module build failed:
#import 'base';
^
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
I also tried adding style-loader as an additional loader to the webpack.config file (alongside css-loader and sass-loader), but that produces the following error:
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
(line 1, column 1)
at Object../node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--2-0!./node_modules/style-loader/index.js!./node_modules/css-loader/index.js??ref--2-2!./node_modules/sass-loader/lib/loader.js??ref--2-
Others who have had problems getting the css configured suggest that there may be config defined elsewhere. I don't seem to have that. I am about halfway through deleting all the references to css in the backend generated file. That was working (up to newProjectTile) but now that still generates failure to build css error.
Driving me crazy that config is so complicated across these tools. If anyone has added a custom theme to the backend generator (regardless of whether it's the Creative Tim theme or otherwise), have you found a way to compile CSS? Any tips would be very much appreciated.
Currently, my webpack.config file is as follows - errors galore in the console and still no closer to an idea for how to resolve them.
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const project = require('../project.config')
const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = file => inProject(project.srcDir, file)
const __DEV__ = project.env === 'development'
const __TEST__ = project.env === 'test'
const __PROD__ = project.env === 'production'
const CSSExtract = new ExtractTextPlugin('styles.css');
const config = {
entry: {
normalize: [inProjectSrc('normalize')],
main: [inProjectSrc(project.main)]
},
devtool: project.sourcemaps ? 'source-map' : false,
output: {
path: inProject(project.outDir),
filename: __DEV__ ? '[name].js' : '[name].[chunkhash].js',
publicPath: project.publicPath
},
resolve: {
modules: [inProject(project.srcDir), 'node_modules'],
extensions: ['*', '.js', '.jsx', '.json']
},
externals: project.externals,
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}]
},
plugins: [
CSSExtract,
new webpack.DefinePlugin(
Object.assign(
{
'process.env': { NODE_ENV: JSON.stringify(project.env) },
__DEV__,
__TEST__,
__PROD__
},
project.globals
)
)
],
node: {
// disable node constants so constants.js file is used instead (see https://webpack.js.org/configuration/node/)
constants: false
}
}
// JavaScript
// ------------------------------------
config.module.rules.push({
test: /\.(js|jsx)$/,
exclude: [
/node_modules/,
/redux-firestore\/es/,
/react-redux-firebase\/es/
// Add other packages that you are npm linking here
],
use: [
{
loader: 'babel-loader',
query: {
cacheDirectory: true,
// ignore root .babelrc (Check issue #59 for more details)
babelrc: false,
plugins: [
'lodash',
'transform-decorators-legacy',
'babel-plugin-transform-class-properties',
'babel-plugin-syntax-dynamic-import',
'babel-plugin-transform-export-extensions',
[
'babel-plugin-transform-runtime',
{
helpers: true,
polyfill: false, // we polyfill needed features in src/normalize.js
regenerator: true
}
],
[
'babel-plugin-transform-object-rest-spread',
{
useBuiltIns: true // we polyfill Object.assign in src/normalize.js
}
]
],
presets: [
'babel-preset-react',
[
'babel-preset-env',
{
targets: {
ie9: true,
uglify: true,
modules: false
}
}
]
]
}
}
]
})
// Styles
// ------------------------------------
const extractStyles = new ExtractTextPlugin({
filename: 'styles/[name].[contenthash].css',
allChunks: true,
disable: __DEV__
})
config.module.rules.push({
test: /\.(sass|scss)$/,
loader: extractStyles.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: project.sourcemaps,
modules: true,
importLoaders: 2,
localIdentName: '[name]__[local]___[hash:base64:5]',
minimize: {
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: project.sourcemaps
}
}
},
{
loader: 'style-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: project.sourcemaps,
includePaths: [inProjectSrc('styles')]
}
}
]
})
})
config.plugins.push(extractStyles)
// Images
// ------------------------------------
config.module.rules.push({
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 8192
}
})
// Fonts
// ------------------------------------
;[
['woff', 'application/font-woff'],
['woff2', 'application/font-woff2'],
['otf', 'font/opentype'],
['ttf', 'application/octet-stream'],
['eot', 'application/vnd.ms-fontobject'],
['svg', 'image/svg+xml']
].forEach(font => {
const extension = font[0]
const mimetype = font[1]
config.module.rules.push({
test: new RegExp(`\\.${extension}$`),
loader: 'url-loader',
options: {
name: 'fonts/[name].[ext]',
limit: 10000,
mimetype
}
})
})
// HTML Template
// ------------------------------------
config.plugins.push(
new HtmlWebpackPlugin({
template: inProjectSrc('index.html'),
inject: true,
minify: {
collapseWhitespace: true
}
})
)
// Development Tools
// ------------------------------------
if (__DEV__) {
config.entry.main.push(
`webpack-hot-middleware/client.js?path=${
config.output.publicPath
}__webpack_hmr`
)
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
)
}
// Bundle Splitting
// ------------------------------------
if (!__TEST__) {
const bundles = ['normalize', 'manifest']
if (project.vendors && project.vendors.length) {
bundles.unshift('vendor')
config.entry.vendor = project.vendors
}
config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({ names: bundles })
)
}
// Production Optimizations
// ------------------------------------
if (__PROD__) {
config.plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: !!config.devtool,
comments: false,
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
}
})
)
}
module.exports = config
I'm attempting to use webpack v3 to test long term caching. When I build twice by webpack(just make a change to index.jsx file), and the hash value changed to vendor file.
webpack.config.js
Reference：Caching
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin')
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
const InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
// const CompressionPlugin = require('compression-webpack-plugin')
/**
* global variable of config
*/
// replace localhost with 0.0.0.0 if you want to access
// your app from wifi or a virtual machine
const host = process.env.HOST || '0.0.0.0'
const port = process.env.PORT || 8080
const allowedHosts = ['192.168.19.61']
const sourcePath = path.join(__dirname, './site')
const distPath = path.join(__dirname, './dist')
const htmlTemplate = './index.template.ejs'
const stats = {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m'
}
}
/**
* webpack config
*/
module.exports = function (env) {
const nodeEnv = env && env.production ? 'production' : 'development'
const isProd = nodeEnv === 'production'
/**
* Mete Design Webpack V3.1 Buiding Informations
*/
console.log('--------------Mete Design Webpack V3.1--------------')
console.log('enviroment:' + nodeEnv)
console.log('host:' + host)
console.log('port:' + port)
console.log('dist path:' + distPath)
console.log('platform:' + env.platform)
console.log('-----------------Mete Design Group------------------')
/**
* common plugin
*/
const plugins = [
new webpack.optimize.CommonsChunkPlugin({
// vendor chunk
names: ['manifest', 'vendor'] // the name of bundle
}), // new webpack.optimize.CommonsChunkPlugin({ // name: 'manifest', // minChunks: Infinity // }), // setting production environment will strip out // some of the development code from the app // and libraries
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
}), // create css bundle // allChunks set true is for code splitting
new ExtractTextPlugin({
filename: 'css/[name]-[contenthash].css',
allChunks: true
}), // create index.html
new HtmlWebpackPlugin({
template: htmlTemplate,
inject: true,
production: isProd,
minify: isProd && {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
}),
new InlineManifestWebpackPlugin({
name: 'webpackManifest'
}),
new InlineChunkManifestHtmlWebpackPlugin({
manifestPlugins: [
new ChunkManifestPlugin({
filename: 'manifest.json',
manifestVariable: 'webpackManifest',
inlineManifest: false
})
]
})
]
if (isProd) {
/**
* production envrioment plugin
*/
plugins.push(
// minify remove some of the dead code
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
mangle: false
}),
new webpack.optimize.ModuleConcatenationPlugin())
} else {
/**
* development enviroment plugin
*/
plugins.push(
// make hot reloading work
new webpack.HotModuleReplacementPlugin(),
// show module names instead of numbers in webpack stats
new webpack.NamedModulesPlugin(),
// don't spit out any errors in compiled assets
new webpack.NoEmitOnErrorsPlugin()
// load DLL files
// new webpack.DllReferencePlugin({context: __dirname, manifest: require('./dll/react_manifest.json')}),
// new webpack.DllReferencePlugin({context: __dirname, manifest: require('./dll/react_dom_manifest.json')}),
// // make DLL assets available for the app to download
// new AddAssetHtmlPlugin([
// { filepath: require.resolve('./dll/react.dll.js') },
// { filepath: require.resolve('./dll/react_dom.dll.js') }
// ])
)
}
return {
devtool: isProd ? 'source-map' : 'cheap-module-source-map',
entry: {
main: ['babel-polyfill', path.join(sourcePath, 'index.js')],
// static lib
vendor: ['react', 'react-dom', 'react-router-dom']
},
output: {
filename: isProd ? 'js/[name]-[hash].bundle.js' : 'js/[name].bundle.js',
chunkFilename: isProd ? 'js/[id]-[chunkhash].bundle.js' : 'js/[id].bundle.js',
path: distPath,
publicPath: './'
},
// loader
module: {
rules: [
// js or jsx loader
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['es2015', {
'modules': false
}], 'react', 'stage-0'],
cacheDirectory: true // Since babel-plugin-transform-runtime includes a polyfill that includes a custom regenerator runtime and core.js, the following usual shimming method using webpack.ProvidePlugin will not work:
}
}
}, // css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: isProd
}
}],
publicPath: '/'
})
}, // scss loader
/* {
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
publicPath: '/',
fallback: 'style-loader',
use: [
// {loader: 'autoprefixer-loader'},
{
loader: 'css-loader',
options: {
minimize: isProd
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: [sourcePath, path.join(__dirname, './src')]
}
}
]
})
}, */
// images loader
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'url-loader?limit=8024&name=assets/images/[name]-[hash].[ext]'
},
{
test: /\.(woff2?|otf|eot|ttf)$/i,
loader: 'url-loader?limit=8024&name=assets/fonts/[name].[ext]',
options: {
publicPath: distPath
}
},
{
test: /\.md$/,
loader: 'raw-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules'), sourcePath],
alias: {
md_components: path.resolve(__dirname, 'src/components'),
md_midware: path.resolve(__dirname, 'src/md-midware')
}
},
plugins,
stats,
// webpack dev server
devServer: {
// 文件路劲，一般静态文件需要
contentBase: '/',
// 是否启用gzip压缩
compress: true,
// 是否启用热替换
hot: true,
port,
// 开启任意ip访问
host,
// 允许列表中host访问
allowedHosts,
// 取消host列表安全检查，开发环境启用，默认关闭，开启则allowedHosts无效
// disableHostCheck: true,
// 关闭webpack重启打包信息，错误和警告仍然会显示
noInfo: true,
// 浏览器全屏显示编译器错误信息
overlay: true,
// 公共文件，浏览器可直接访问，HMR必须
publicPath: '/'
}
}
}
fisrt build
js/vendor-a674cd02275fdf4760bd.bundle.js 343 kB 1 [emitted] [big] vendor
second build(just update index.jsx)
js/vendor-f8d5fc2097878041c158.bundle.js 343 kB 1 [emitted] [big] vendor
Both hashes change even though I only updated the index file.
Help
Anyone can help me to check this problem? Thanks.
Github Repo:webpack_long_term_cache_test
filename in output use chunkhash, and reset the CommonsChunkPlugin name: ['vendor', 'manifest']