as shown in the figure, where is the id of [id] .css displayed in the 32 lines of chunkFilename: "[id] .css"
? Thank you
as shown in the figure, where is the id of [id] .css displayed in the 32 lines of chunkFilename: "[id] .css"
? Thank you
mini-css-extract-plugin 's options is consistent with webpack's outputs . For details, please refer to the following example:
if you define the following entry:
entry: {
A: './moduleA.js',
B: './moduleB.js',
C: './moduleC.js',
}the output definition looks like this:
output: {
filename: '[name].js'
} since name is app , a app.js
and the value of chunkFilename [id] .js tells webapck how to handle non- entry modules.
entry can use either name or id , while those not entry can only use id . The default chunkFilname is [id] .css , which can not be set.
if you change filename:'[name] .js' of output to filename:'[id] .js , you can see output similar to the following:
Hash: f0856d7819896631db4b
Version: webpack 4.28.4
Time: 3391ms
Built at: 2019-01-15 18:03:59
Asset Size Chunks Chunk Names
0.js 383 bytes 0 [emitted] commons
0.js.map 196 bytes 0 [emitted] commons
1.js 189 bytes 1 [emitted] vendor
1.js.map 857 bytes 1 [emitted] vendor
2.js 1.54 KiB 2 [emitted] A
2.js.map 5.31 KiB 2 [emitted] A
3.js 1.55 KiB 3 [emitted] B
3.js.map 5.3 KiB 3 [emitted] B
4.js 1.58 KiB 4 [emitted] C
4.js.map 5.31 KiB 4 [emitted] C
commons.css 60 bytes 0 [emitted] commons
commons.css.map 150 bytes [emitted]
index.html 321 bytes [emitted] where A, B, C under Chunk Names corresponds to A, B, C of entry , while the number of the Asset column happens to be the value of the chunks column, so the value of the chunks column is id.
webpack project upgrade version configuration is as follows: webpack.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "watch": &quo...
webpack.config.js: var webpack = require( webpack ); var path = require("path"); module.exports = { entry: . src app.js , output: { path: path.resolve(__dirname, . bin ), filename: app.bundle.js ...
identity function for calling harmony imports with the correct context __webpack_require__.i = function(value) { return value; }; After webpack is packaged, there will be a function, what is the function of this function? The comments are not unders...
I changed the dev of scripts in package.json to "dev ": "webpack-dev-server-- open ", but there was no page effect. document structure: :webpack-dev-serverdev package.json:mainjsindex.jsindex.jsdistjsbundle.jsbundle.js webpack.config.js:contentBase...
as shown in the picture, the following error is reported when packing, the reason is unknown! ERROR in static js vendor.c6cf6d8258be562986f2.js from UglifyJs ...
this is the configuration in webpack: { test: .jsx$ , exclude: (node_modules) , use: { loader: babel-loader , options: { presets: [ env , react ] ...
I don t know which property to set so that the error prompt of eslint is displayed on the browser ...
recently looking at the JavaScript, generated by Webpack, there is a question that I don t understand: why should Webpack provide the mode of eval , wrapping the generated code of the module with eval ? the discussion here is not limited to devtoo...
this is the source code for the configuration: const path = require( path ) const webpack = require( webpack ) const CleanWebpackPlugin = require( clean-webpack-plugin ) const ExtractTextPlugin = require( extract-text-webpack-plugin ) const pag...
I refer to the picture in the style tag in the .vue file template style webpack where assetsPath ( images [name]. [hash: 7]. [ext] ) is static images [name]. [hash: 7]. [ext] ...
satisfies both the beginning of api and the need to forward to aaa, api order to bbb. api : { target: http: dev.api.aaa.cn , changeOrigin: true }, api order : { target: http: dev.api.bbb.cn , changeOr...
webpack is configured as follows output: { path: path.resolve(__dirname, .. .. public static dev ), filename: js [name].js filename: js [name]_[chunkhash:8].js }, module: { rules: [ { test: .(woff2?|...
Hello, everyone. in the package import rc-scroll-anim , there was no problem with the development in dev environment, but an error was reported when it was run after compilation. After typing log, I found that the content of import in the two modes wa...
after webpack npm start, there is no error, but why is there no build.js file generated in my build folder ...
the same third-party dependency libraries are import in the js of each module, so they are repeatedly packaged when they are packaged. Now I just want to package these basically unchanged ones only once and then lead them to each html. How do I do this? ...
react project created by create-react-app, after using webpack, always report thisCompilation of undefined, how to configure this, please give me some advice! ...
if the title, mainly the front-end code released to CDN, and CDN will co-exist multiple versions, according to access to information, found that there is a way is the front-end in the compilation process, will record the newly packaged file hash file nam...
...
in webpack-dev-server development mode, display:flex will issue the above warning after using autoprefixer . Do you know the solution ? ...
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 : ...