I have been tasked by fixing the Webpack build in a project I work on. I'm no Webpack expert and am struggling somewhat to make this work. The project has a untraditional react frontend with typescript. I have been trying to create this webpack.common.js/dev.js/prod.js setup. But nothing seems to work. Since I have the entry set in webpack.common.js I would assume that the entry would be set, but Webpack still tries to find it as src/index.js. Here is my webpack.dev.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: '../FrontEnd/dist/base'
}
});
Webpack.prod.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production'
});
webpack.common.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');
const BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
entry: {
app: ["babel-polyfill", "./src/NordicBase/NKportal/portal.tsx", "core-js/fn/promise"],
vendor: ['react', 'react-dom']
},
plugins: [
new CleanWebpackPlugin(),
new BitBarWebpackProgressPlugin(),
new webpack.ProvidePlugin({
'Promise': 'es6-promise',
'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),
new HtmlWebpackPlugin({
title: 'Production'
})
],
node: {
fs: "empty"
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader?name=fonts/[name].[ext]"
},
{
test: /\.css$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
{
test: /\.scss$/,
// include: [
// path.resolve(__dirname, "src/css")
// ],
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
//limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
}
],
},
output: {
filename: "[name].bundle.js",
path: path.resolve("../FrontEnd/dist/Base")
}
});
I have been using Webpack guide for production setup in combination with trying to use different parts of the configuration of the old setup. My scripts from package.json:
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
when I run the the build script i get:
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users.......'
Webpack version : 4.39.2. If I move common setup from Webpack.Common to Webpack.prod the entry is recognized but it crashes because none of the modules being imported in the entry files are found. I don't now why this happens since the project is building fine with the old setup.
Solved this issue, problem here was that I pasted the wrong code for webpack.common.js. Actually pasted the content for a version of webpack.prod.js as I was trying to debug the issue. in the original webpack.common.js I had modules.export instead of module.exports. I was also missing resovle argument:
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json", ".css"]
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.