Output: Configuring the output option can control how webpack writes compiled files to the hard disk. Note that even though multiple entry points can exist, only one output configuration is specified.
We first initialize a project npm init , install webpack and webpack-cli locally, then create index.html , webpack.config.js and src folders in the root directory, and create a main.js in the folder as the entry file
After the preparation work is completed, it is as shown in the figure:
main.js
function Component(){
var div=document.createElement('div')
div.innerHTML="Let's learn export configuration together~"
return div
}
document.body.appendChild(Component()) index.html
<body>
<script src="./dist/bundle.js"></script>
</body> packag.json
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build":"webpack" //Add }, then the configuration part: webpack.config.js
Configuring the output option can control how webpack writes compiled files to the hard disk.
Note that even if there can be multiple入口points, only one输出configuration is specified.
The following are several concepts of output configuration:
1. Path
path specifies the location of resource output, and the required value must be an absolute path , such as:
const path=require(' path')
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
//Set the resource output location to the dist directory path of the project: path.resolve(__dirname, 'dist')
},
} After Webpack 4, output.path has defaulted to the dist directory . Unless we need to change it, there is no need to configure it separately, so if it is webpack4 or above, you can write:
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
},
} 2. filename
The function of filename is to control the file name of the output resource , which is in the form of a string. Here I name it bundle.js , which means I want the resources to be output in a file called bundle.js:
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
},
} After packaging, as shown in the figure, a dist folder will be automatically generated with a bundle.js file in it.
filename can be not only the name of the bundle, but also a relative path.
It doesn't matter if the directory in the path does not exist. Webpack will create the directory when outputting resources, for example:
module.exports = {
output: {
filename: './js/bundle.js',
},
}; As shown in the picture after packaging:
In a multi-entry scenario , we need to specify a different name for each generated bundle. Webpack supports using a template language-like form to dynamically generate file names .
Before that, we create a new entry file in src
vender.js:
function Component(){
var div=document.createElement('div')
div.innerHTML="I am the second entry file"
return div
}
document.body.appendChild(Component()) webpack.config.js:
module.exports = {
entry:{
main:'./src/main.js',
vender:'./src/vender.js'
},
output: {
filename: '[name].js',
},
}; As shown in the picture after packaging:
[name] in filename will be replaced with chunk name, namely main and vendor. Therefore, vendor.js and main.js will be generated in the end
. If you want to see the content, you need to change the content in index.html and match the path to the last packaged bundle
<body>
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [Question] There will be a need at this time. How can we make
index.htmlautomatically add the generated bundle to html for us? The plug-in HtmlWebpackPlugin can be used here. See below for details.
3.
In addition to [name] which can refer to the chunk name, there are several other template variables that can be used in the configuration of filename:
They can: control the client cache
[hash] and [chunkhash] are directly related to the chunk content. If used in filename, when the chunk content changes, it can also cause the resource file name to change, so that the user will immediately download the new version the next time he requests the resource file without using the local cache.
[query] can also have a similar effect, but it has nothing to do with the chunk content and must be manually specified by the developer.
4. publicPath
publicPath is a very important configuration item, used to specify the request location of resources.
Take loading pictures as an example.
import Img from './img.jpg';
function component() {
//...
var img = new Image();
myyebo.src = Img //Request url
//...
} {
//...
query: {
name: '[name].[ext]',
outputPath: 'static/img/',
publicPath: './dist/static/img/'
}
} As shown in the above example, the original image request address is ./img.jpg , but after adding publicPath to the configuration, the actual path becomes ./dist/static/img/img.jpg , so Images can be obtained from packaged resources.
There are 3 forms of publicPath:
HTML related.
We can specify publicPath as the relative path of HTML. When requesting these resources, the path of the current page's HTML will be added to the relative path to form the actual request. URL
//Assume the current html address is: https://www.example.com/app/index.html //The resource loaded asynchronously is named 1.chunk.js publicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
Host related
If the value of publicPath starts with "/", it means that the publicPath at this time starts with The host name of the current page is the base path
// Assume the current html address is: https://www.example.com/app/index.html //The resource loaded asynchronously is named 1.chunk.js publicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
CDN related
The above two are relative paths. We can also use the absolute path to configure publicPath
. This situation generally occurs when static resources are placed on CDN. Since its domain name is inconsistent with the current page domain name, it needs to be specified in the form of an absolute path.
When publicPath starts in the form of a protocol header or a relative protocol, it means that the current path is CDN related
/ /Assume the current html address is: https://www.example.com/app/index.html //The resource loaded asynchronously is named 1.chunk.js publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. Single entrance
The minimum requirement for configuring the output attribute in webpack is to set its value to an object, including the following two points:
filename is the file name of the output file.pathmodule.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
},
}
//After webpack 4, dist will be generated by default, so path is omitted here. 2. Multiple entries.
If the configuration creates multiple separate "chunks", you should use placeholders to ensure that each file has a unique name.
The above is used here. [name] of the filename mentioned.
In addition, if you want to put these resources into the specified folder, you can add path configuration
module.exports={
entry: {
main: './src/main.js',
vender: './src/vender.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist/assets' //Specify that the packaged bundle is placed in the /dist/assets directory}
}
// Generate after packaging: ./dist/assets/main.js, ./dist/assets/vender.js The remaining problems above in this chapter can be solved by using the plug-in HtmlWebpackPlugin
Install the plug-
in npm install --save-dev html-webpack-plugin
configure the plug-in
const HtmlWebpackPlugin=require('html-webpack-plugin') //Load module module.exports = {
entry:{
main:'./src/main.js',
vender:'./src/vender.js'
},
//Add plugins plugins:[
new HtmlWebpackPlugin({
title:'output management'
})
],
output: {
filename: '[name].js',
},
}; After the packaging
is completed, you will find that a new index.html appears in dist, which automatically adds the generated resources for us. After opening, you will find that the browser will display the content.
This means that you do not need to write index.html when initializing a project in the future.
The source code can be obtained here:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/files