Output, the core concept of webpack-JS Tutorial-php.cn

After gathering all the assets together, you also need to tell webpack where to package the application. The output attribute of webpack describes how to handle bundled code. The following article will give you an in-depth understanding of the output (Output) in the core concept of webpack. I hope it will be helpful to you!

Output, the core concept of webpack

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.

Start

We first npm init initialize a project and install webpack and webpack locally -cli, then create index.html, webpack.config.js and src folders in the root directory, and create another one inside the folder main.jsAs the entry file

After the preparation work is completed, as shown in the figure:

Output, the core concept of webpack

main. js

function Component(){
    var div=document.createElement('div')
    div.innerHTML="来一起学习出口配置吧~"
    return div
}
document.body.appendChild(Component())

Copy after login

index.html

    <script></script>

Copy after login

packag.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build":"webpack" //加上
},

Copy after login

The next step is the configuration part:webpack.config.js

Output)

Configurationoutput options can control how webpack sends The compiled file is written to the hard disk.

Note that even though there can be multiple entrancesstarting points, only one outputconfiguration

The following are several output configurations Concept:

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',
        //将资源输出位置设置为该项目的dist目录
        path: path.resolve(__dirname, 'dist')
    },
}

Copy after login

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',
    },
}

Copy after login

2, filename

filename The function is to control the file name of the output resource, which is in the form of a string. Here I named 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',
    },
}

Copy after login

As shown in the figure after packaging, a # will be automatically generated. ##dist folder, there is a bundle.js file

Output, the core concept of webpack

filename can be not only the name of the bundle, but also It can be a relative path

It doesn’t matter even 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',
    },
  };

Copy after login

After packaging, it is like this:

Output, the core concept of webpack

In a multi-entry scenario, we need to specify a different name for each generated bundle. Webpack supports the use of a similar template language Dynamically generate the file name in the form

Before that, we create a new entry file

vender.js in src

function Component(){
    var div=document.createElement('div')
    div.innerHTML="我是第二个入口文件"
    return div
}
document.body.appendChild(Component())

Copy after login

webpack.config.js：

module.exports = {
    entry:{
        main:'./src/main.js',
        vender:'./src/vender.js'
    },
    output: {
      filename: '[name].js',
    },
 };

Copy after login

After packaging, as shown in the figure:

Output, the core concept of webpack

[name] in filename will 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 still need to

index.htmlChange the content in the middle and match the path to the last packaged bundle

    <script></script>
    <script></script>

Copy after login

[Question] There will be a need at this time, how to make
index.html automatically help What if we add the generated bundle to html? The plug-in HtmlWebpackPlugin can be used here. See the details below

3. Others

except

[name] In addition to chunk name, there are several other template variables that can be used in the configuration of filename:

[chunkhash]: refers to the hash of the current chunk content
[id]: refers to the id of the current chunk
[query]: refers to the query
in the filename configuration item

They can:

Control client-side caching

[hash] and [chunkhash] are both directly related to chunk content , if used in filename, when the content of the chunk changes, it can also cause the resource file name to change, so that the user will immediately download the new version when requesting the resource file next time 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是一个非常重要的配置项，用来指定资源的请求位置

以加载图片为例

import Img from './img.jpg';
function component() {
    //...
    var img = new Image();
    myyebo.src = Img //请求url
	//...
}

Copy after login

        {
          //...
          query: {
            name: '[name].[ext]',
            outputPath: 'static/img/',
            publicPath: './dist/static/img/'
          }
        }

Copy after login

由上面的例子所示，原本图片请求的地址是./img.jpg，而在配置上加上publicPath后，实际路径就变成了了./dist/static/img/img.jpg，这样就能从打包后的资源中获取图片了

publicPath有3种形式：

HTML相关

我们可以将publicPath指定为HTML的相对路径，在请求这些资源时会以当前页面HTML所在路径加上相对路径，构成实际请求的URL

//假设当前html地址为：https://www.example.com/app/index.html
//异步加载的资源名为 1.chunk.js
pubilicPath:"" 		//-->https://www.example.com/app/1.chunk.js
pubilicPath:"./js" 	//-->https://www.example.com/app/js/1.chunk.js
pubilicPath:"../assets/"  	//-->https://www.example.com/assets/1.chunk.js

Copy after login

Host相关

若publicPath的值以“/”开始，则代表此时publicPath是以当前页面的host name为基础路径的

//假设当前html地址为：https://www.example.com/app/index.html
//异步加载的资源名为 1.chunk.js
pubilicPath:"/" 	//-->https://www.example.com/1.chunk.js
pubilicPath:"/js/" 	//-->https://www.example.com/js/1.chunk.js

Copy after login

CDN相关

上面两个都是相对路径，我们也可以使用绝对路径的形式配置publicPath

这种情况一般发生于静态资源放在CDN上面时，由于其域名与当前页面域名不一致，需要以绝对路径的形式进行指定

当publicPath以协议头或相对协议的形式开始时，代表当前路径是CDN相关
```
//假设当前html地址为：https://www.example.com/app/index.html
//异步加载的资源名为 1.chunk.js
pubilicPath:"http://cdn.com/" 	//-->http://cdn.com/1.chunk.js
pubilicPath:"https://cdn.com/"	//-->https://cdn.com/1.chunk.js
pubilicPath:"//cdn.com/assets"	//-->//cdn.com/assets/1.chunk.js
```
Copy after login

应用

1、单个入口

在 webpack 中配置 output 属性的最低要求是将它的值设置为一个对象，包括以下两点：

filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径

module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
    },
}
//webpack4以后dist会默认生成，于是这里省略了path

Copy after login

2、多个入口

如果配置创建了多个单独的 "chunk"，则应该使用占位符来确保每个文件具有唯一的名称

这里用到了上面所讲的filename的[name]

另外，如果想将这些资源放进指定的文件夹，可以加上path配置

module.exports={
    entry: {
      main: './src/main.js',
      vender: './src/vender.js'
    },
    output: {
      filename: '[name].js',
      path: __dirname + '/dist/assets' //指定打包后的bundle放在/dist/assets目录下
    }
  }
// 打包后生成：./dist/assets/main.js, ./dist/assets/vender.js

Copy after login

HtmlWebpackPlugin

本章上方遗留的问题可以通过使用插件HtmlWebpackPlugin解决

安装插件

npm install --save-dev html-webpack-plugin

Copy after login

配置插件

const HtmlWebpackPlugin=require('html-webpack-plugin') //加载模块
module.exports = {
    entry:{
        main:'./src/main.js',
        vender:'./src/vender.js'
    },
    //添加插件
    plugins:[
        new HtmlWebpackPlugin({
            title:'output management'
        })
    ],
    output: {
      filename: '[name].js',
    },
 };

Copy after login

打包

打包完成后你会发现dist中出现了一个新的index.html,上面自动帮我们添加所生成的资源，打开后会发现浏览器会展示出内容

Output, the core concept of webpack

这意味着，以后初始化一个项目就不必写index.html了

源码可从这里获取：

https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/files

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Output, the core concept of webpack. For more information, please follow other related articles on the PHP Chinese website!