webpack-4

问题 First, I don't understand what is the meaning for extract all css in a single file, and What's the profit of doing that? Moreover, I try use splitChunks of webpack4 to extract css but it is produced a js files. I think, it is not supposed to be produces a css files? this is my code. splitChunks: { cacheGroups:{ vendors: { test: /\.js$/g, chunks: 'all', name: 'vendors', minChunks: 1, minSize: 1 }, styles: { test: /\.less$/g, chunks: 'all', name: 'styles', minChunks: 1, minSize: 1, enforce:

问题 webpack.config.js module.exports = { entry: { app: './src/main.js', }, output: { path: path.resolve(__dirname, './dist/js/'), publicPath: '/js/', filename: '[name].js', chunkFilename: 'chunk/[contenthash:32].js', // use contenthash here hashDigestLength:32, }, product a file 28024a27808de6fae79a1f5596584d3e.js , but actually the content hash is 9c757e82e0a41d8e51228532a109a0d7 回答1: webpack uses the old md4 hash algorithm . Also it runs this on the base64 encoded version of your file. Most

问题 I have a simple js file that I am trying to use webpack 4 with: const CopyPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin'); //const ClosurePlugin = require('closure-webpack-plugin') const path = require('path'); module.exports = env => { console.log("Building with env", env) const config = { entry: { index: './src/index.js', "network-mapper": './src/network-mapper/network-mapper.js' },

问题 I've upgraded to Webpack 4 from 3. Since then, I get a lot of warnings regarding imports that were not exported from certain files. ./packages/utils/logging/index.ts Attempted import error: ‘Options' is not exported from './loggers/log'. @ ./packages/utils/index.ts @ ./src/App.tsx @ multi whatwg-fetch @babel/polyfill ./src/App.tsx I use ts-loader along with ForkTsCheckerWebpackPlugin . I've examined the exports from the warnings and they look good. The code does work, however I still get

问题 I'm trying to migrate from webpack 3 to webpack 4. The issue I have is with CommonsChunkPlugin, when I try to run webpack ( npm run webpack-dev-server -- --config config/webpack.dev.js ), I have the following error: module.js:529 throw err; ^ Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin' at Function.Module._resolveFilename (module.js:527:15) at Function.Module._load (module.js:476:23) at Module.require (module.js:568:17) at require (internal/module.js:11:18) at Object.

问题 I use webpack 4 and need to optimize and minify css after build comand. I found optimize-css-assets-webpack-plugin but this plugin doesn't work. Do you use these plugins or loaders for optimizing css or not? Do we need to use it or not? 回答1: With webpack 4 you need to bring your own. To minify the output, use a plugin like optimize-css-assets-webpack-plugin. However, note that setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS

问题 Can not figure out, why when I am simply running npm run start from command line, project starts up and everything seems to be working fine.. But If I am trying to start it on IIS from Visual studio it starts browser window (which gets timed out "The create-react-app server did not start listening for requests within the timeout period of 50 seconds"). And after few seconds it starts a second browser tab, on new port, which loads my project as desired.. I very believe there is problem with my

问题 Im trying to compile scss into a separate css file with no luck. As it is now the css gets into the bundle.js together with all js code. How can i separate my css into its own file? This is how my config looks. var path = require("path"); module.exports = { entry: "./js/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/dist" }, watch:true, module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader", options: { presets: ["es2015"] } } }, {

问题 I see that this answer suggests the syntax for importing images as shown below (commented out). In my case, it didn't work out (complaining there's no modules to find in that file) and I had to switch to the syntax that's currently active. // import Author from "../assets/author.png"; var Author = require("../assets/author.png"); The difference I can imagine is that I'm using TypeScript (transpiling my TSX by awesome-typescript-loader and loading my PNG file-loader ) and they seem to use JSX.

问题 I have a few JS and SCSS files. I need Webpack 4 to bundle each JS entry to one JS file and each SCSS entry to one CSS file. The JS files don't import the SCSS files. I try to do it with the following webpack.config.js : const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: { scriptFoo: './src/js/scriptFoo.js', scriptBar: './src/js/scriptBar.js', // ... styleBaz: './src/css/styleBaz.scss', styleBaq: './src/css/styleBaq.scss' /