When webpack study notes (b) packaged AMD module js error path

The problems encountered when using webpack packaged module, various Baidu has been unable to solve this problem, the novice is really too unfriendly.

webpack as a module packaging tool that can be AMD, CMD, CommonJs, ES6 modules are packaged here to recommend a narrator module more detailed blog: webpack use CMD, AMD, CommonJS, ES6 difference and the use
I have encountered in my use to some problems

1. AMD packaged module problem

Because AMD module references more than one file, so the file folder inside the generated package will have multiple documents such as:
Here Insert Picture Description
the packing method to do the subtraction of a 20-2
file reference as follows:
Here Insert Picture Description
operating results as follows :
Here Insert Picture Description
I have found here 1.app.js file path is wrong

Then to get it

There is a method of configuration file webpack itself
such as:

 //解决办法就是将path 的路径跟publicPath 的路径配置成一样
module.exports = {
	// entry : 是配置 webpack的入口文件
    entry:"./amd.js",
    //output : 配置输出文件
    output:{
    	//path  : 打包后文件存放的地方(路径)
        path:__dirname+'/dist',
        // filename: 我粗略的理解为打包的文件名
        filename:"app.js",
        /* publicPath: 为处理静态资源引用地址用的
         比如刚才我们引用的路径 */
        publicPath: __dirname+"/dist/"
     
    }
}

Questions to get

Finally, the results of successful operation as follows:
Here Insert Picture Description

that's nice!

Published 50 original articles · won praise 23 · views 1246

Guess you like

Origin blog.csdn.net/qq_44698161/article/details/102783891