I am trying to create a production build with the following configureWebpack but Terser doesnt run during build.
Code is not minimized or uglified. Ialso tried hidden-source-map
Using "terser-webpack-plugin": "^5.3.3" with #vue/cli#5.0.7
isProd is correctly set to true.
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: '/',
devServer: {
host: 'staging-beta.myDomain.com',
port: 9000,
allowedHosts: 'all',
},
transpileDependencies: ['vuetify'],
chainWebpack: (config) => {
// reducted code
},
configureWebpack: {
devtool: 'source-map',
optimization: {
minimize: isProd,
minimizer: isProd
? [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
]
: [],
},
},
};
The correct setup is:
module.exports = defineConfig({
terser: {
minify: 'uglifyJs',
terserOptions: {
compress: {
drop_console: true,
},
},
},
})
You also need to npm install uglify-js
comments under output is deprecated.
Related
Here is my vue.config.js file. I have followed the instructions given here: https://github.com/JayeshLab/demo-vue-console-log-removal
Still I can see logs in browser, what else am I missing?
const TerserPlugin = require("terser-webpack-plugin");
const isProd = true
module.exports = {
lintOnSave: false,
devServer: {
proxy: 'http://localhost:3000/'
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
})
},
configureWebpack: {
optimization: {
minimize: true,
minimizer: isProd ? [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true
},
output: {
comments: false
}
}
})
] : []
}
}
}
Managed to solve it by changing babel.config.js configuration. Added transform-remove-console plugin
const removeConsolePlugin = []
if(process.env.NODE_ENV == 'staging' || process.env.NODE_ENV == 'production') {
removeConsolePlugin.push("transform-remove-console")
}
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
plugins: removeConsolePlugin
}
Having added also a vue.config.js next to my babel.config.js I realized that the code doesn't get transpiled to ES5 anymore, probably because babel.config.js is fully ignored once there's a vue.config.js (?)
How can I keep babel transpiling the code when building with the presets given while yet having a vue.config.js with other configurations?
babel.config.js
module.exports = {
presets: [['#vue/app', { useBuiltIns: 'entry', corejs: 'core-js#2' }]],
}
vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
// needed for vuex-typex to work in production:
keep_fnames: true,
},
}),
]
}
},
css: {
loaderOptions: {
sass: {
data: `#import "./src/core/style/core/_variables.scss";`,
},
},
},
runtimeCompiler: true,
}
Webpack successfully run build, but can't auto exit command after. How to exit?
remove --progress and webpack-dashboard,still can't
webpack.base.conf.js
...// require
module.exports = {
mode: process.env.NODE_ENV,
entry: {
app: './src/main.js',
},
output: {
path: util.resolve('dist'),
filename: 'js/[name].[hash].js',
chunkFilename: 'js/[id].[chunkhash].js',
},
module: {
rules: [
...util.eslint,
...util.cssLoaders,
// more loaders
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.html'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
},
}),
new DllLinkPlugin({
htmlMode: true,
config: require('./webpack.dll.conf.js'),
}),
],
stats: {
children: false,
builtAt: true,
cached: true,
cachedAssets: true
}
};
webpack.prod.conf.js
// requere...
const config = require('./webpack.base.conf');
const env = require('../env.production')
module.exports = merge(config, {
bail: true,
watch:false,
devtool: 'cheap-module-source-map',
plugins: [
// ... mini css html
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
],
optimization: {
... options
}
});
package.json
"build": "cross-env NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js",
link run this
npm run build
i expect exit command after Successfully build ，not like this image
add this to your webpack.base.conf.js
plugins: [
// your plugins...
{
apply: (compiler) => {
compiler.hooks.done.tap('DonePlugin', (stats) => {
console.log('Compile is done !')
setTimeout(() => {
process.exit(0)
})
});
}
}
]
This use webpack's compiler hooks,
https://webpack.js.org/api/compiler-hooks/#done
I'm new to react-native. I want to implement webpack for my project. Can anyone suggest a sample webpack config file for react-native
Here's one:
global.__PLATFORM__ = process.env.RN_PLATFORM || 'ios';
module.exports = {
context: __dirname,
entry: {
index: [
'react-native-webpack/clients/polyfills.js',
`./index.${__PLATFORM__}.js`,
],
},
output: {
path: assetsPath,
filename: `[name].${__PLATFORM__}.bundle`,
chunkFilename: '[name].chunk.js',
publicPath: '/',
},
devServer: {
port: 8081,
quiet: false,
noInfo: true,
lazy: true,
filename: `[name].${__PLATFORM__}.bundle`,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
publicPath: '/',
stats: { colors: true },
},
};
Note that a Webpack config is not the only thing you'll need. This guide goes deeper and gives examples and explanations for the next steps:
Babel config
Module support
Assets require support
I keep getting an error when trying to run a simple test using React, Karma, Jasmine and Webpack. The error is ' Uncaught SyntaxError: Unexpected token < ', I think my jsx isn't being processed to js, but I don't know why that is happening as I understand webpack should handle that using the babel loader. If anyone can provide advice I would be grateful
Here are my files
karma.conf.js
var webpack = require("webpack"),
path = require("path");
// Karma configuration
module.exports = function(config) {
config.set({
basePath: "",
frameworks: ["jasmine"],
files: [
"../test/!**!/!*.test.js"
],
preprocessors: {
"./test/!**!/!*.test.js": ["webpack"]
},
webpack: {
module: {
loaders: [
{
test: /\.jsx?$/i,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{ test: /\.less$/, loader: "style!css!less" }
]
},
},
plugins: [
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
])
],
resolve: {
root: __dirname,
extensions: [
'',
'.json',
'.js',
'.jsx'
]
}
},
webpackMiddleware: {
noInfo: true
},
plugins: [
require("karma-webpack"),
require("karma-jasmine"),
require("karma-chrome-launcher")
],
reporters: ["dots"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
singleRun: false
});
};
my test file example.test.js
var Comp = require('../../../js/common/components/MyComp.jsx'),
React = require('react'),
TestUtils = React.addons.TestUtils;
describe("Component Test", function() {
it("renders an h1", function () {
var component = TestUtils.renderIntoDocument(
<Comp/> // syntax error here
);
var h2 = TestUtils.findRenderedDOMComponentWithTag(
component, 'h2'
);
expect(h1).toExist();
});
});
So the syntax error happens at < Comp... . Thanks!
Apologise it was an error in setting the correct path to the test file.
files: [
"../test/**/*.test.js"
],
preprocessors: {
"../test/**/*.test.js": ["webpack"]
},