what do the filename and chunkFilename configuration items in the following figure mean?
Why is the file name I generated 2.css ?
since this plug-in is used to package all css into one file, can I fix the name?
what do the filename and chunkFilename configuration items in the following figure mean?
Why is the file name I generated 2.css ?
since this plug-in is used to package all css into one file, can I fix the name?
the [id] and [name] in the diagram you give are called placeholder in webpack.
is used to dynamically replace content (essentially regular substitution) after the webpack is built.
then answer your question:
filename and chunkFilenam e mean these two configurations exist in the output of webpack, and mini-css-extract-plugin also said that these two configurations have the same meaning as the output configuration on the
official website.
filename is simply named after the name in entry , which is static .
chunkFilename is generated when builds the application (the user can also specify a name), not in the configuration (such as configuration refers to entry).
modify chunkFilename to another value. You can fix the name (such as chunkFilename: "a.css"), or you can use the placeholder of webpack for
. The placeholders above are id,name and so on.
I hope my answer can help you. Thank you.
you should modify this configuration item;
chunkFilename: "xxx.css"chunkFilename: "[name].css"< H1 > github address < H1 > error will be reported when using npm run dev const path = require( path ); const merge = require( webpack-merge ); const common = require( . webpack.common.js ); dev-server let BundleAnalyzerPlugin = require( ...
1. The data interface is http: www.xxx.com api.paper data under this interface, I use webpack-devServer to configure proxy, but error 404not found is reported on the page. 2.proxy: { manage : { target: http: www.xxxx.com...
webpack found no problems when packaging local development. When the project was to be deployed, the package compilation was happily delivered to the back-end staff. however, there is an unexpected situation in which all dependencies referenced from no...
this is the configuration in webpack: { test: .jsx$ , exclude: (node_modules) , use: { loader: babel-loader , options: { presets: [ env , react ] ...
the configuration is as follows: const webpack = require ( webpack ) const path = require ( path ) const fs = require ( fs ) const chalk = require ( chalk ) const HtmlWebpackPlugin = require ( html-webpack-plugin ) const WebpackMd5H...
eg: ifisProd{ do something for prods }else{ do something for others } webpack do something for prods There is a corresponding plug-in in gulp, which is via regular matching Filter. No corresponding plug-ins have been found i...
webpack4.x less has been introduced and used in the H1 tag, but there is no style on the final page. index.js index.less webpack.dev.js : ...
MiniCssExtractPlugin abstracts why css generates a js file with the same name, and introduces this js to bring in the extracted css link, whether there is a problem with the configuration or just like this. new HtmlWebpackPlugin({ title: "Gol...
desired effect the react components developed by ourselves do not want to introduce react, when they are packaged, but want to introduce react externally . react webpack.config.js report that react is not defined so the above react does no...
{ test: .(sass|scss)$ , use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: ".. " } }, "css-loader", "postcss-loade...
after packaging the react project with create-react-app, all class is lost. How to solve it? ...
the default root route for packaging is " " , how to change the packaged root route to " test " other routes should also be based on test url to display ....
configure https: github.com gaearon re. according to the document. When you modify the name field of state in the file, the page will not be updated, but the button text, page in the render function will be updated. "dev": "webpack-dev...
Why can my react not be packaged and run on IE, and then report that Unhandled promise rejectionTypeError: cannot get the value of the attribute "call ": the object is null or undefined . No matter what mode I switch, I report this error. Ask God to...
problem description my application is a multi-page application. The entry is src a index.js src b index.js . a pages are packaged into a.js b pages and packaged into b.js , where entrances an and b have common codes x.js a, common codes x-a.js b...
recently created a project using create-react-app, and because of the variety of project themes, multiple style files are required for style definition. The original idea of is to define a css file, which is introduced where you need to use it through...
webpack.common.js let lessPackage = {}; if ( NODE_ENV === develop ) { lessPackage = { test: .less , use:[ style-loader , css-loader , less-loader ] }; } else if ( NODE...
configure https: github.com gaearon re. according to the document. When you modify the name field of state in the file, the page will not be updated, but the button text, page in the render function will be updated. "dev": "webpack-dev...
there are two React projects An and B, Project B is a public project, and Project A depends on Project B. they all rely on the antd component library, but with different versions. now the way to use B in An is to build, first and then introduce: <...
what is the following error reported by webpack? I see a similar one in stackoverflow, but I don t understand, https: stackoverflow.com que.. react project, how can you support packaging-sharp symbols, loader or plug-ins? ERROR in. node_modules ...