Home > Article > Web Front-end > How to package specified JS files separately in webpack

How to package specified JS files separately in webpack

亚连Original: 2018-06-05 15:47:142933browse

Below I will share with you a method of packaging specified JS files separately with webpack. It has a good reference value and I hope it will be helpful to everyone.

Background

Recently received a request, because the back-end IP accessed by the printed front-end package is not sure, and it is necessary to check the IP in the project The configuration file is taken out separately to facilitate IP modification during operation and maintenance deployment. Therefore, you need to use webpack to package the specified files separately.

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: &#39;./dist/&#39;, //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: &#39;[name].[chunkhash].js&#39;, // 输出文件名
 chunkFilename: &#39;[name].[chunkhash].js&#39; // commonChunk 输出文件
 }
}

Digression

{

Let’s talk about publicPath first. There is a point to note here, that is, the path is written as ./dist relative path. If you write an absolute path like /dist/, one drawback is that when nginx does not place the front-end package in the root directory, index.html will fail to access the resource. Therefore, it is recommended to write a relative path, but when using a relative path, there will be a potential problem, that is, if the routing access of the project itself is in HTML5 mode instead of using hash (there is a # sign on the routing), then the project will still be accessed. Deployment failed. Angular and React will have such problems. I have never used Vue, so it should be similar. The solution at this time is to add the base tag in the head of index.html, that is:

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <base href="/" rel="external nofollow" >
</head>

}

webpack itself is based on modularization, so in most cases Next, we only need one entry file to get it done. For this requirement, an entry file needs to be added to the app in addition to this entry. That is:

 entry: {
 app: APP_FILE // 入口文件
 ip: IP_FILE
 },

After configuring webpack in this way, the dist file will successfully print app.xxx.js and ip.xxx.js, but the packaged project will still report an error. The solution is: maintain the IP entry The file is unchanged, but treated as a commonChunk. That is, add:

new webpack.optimize.CommonsChunkPlugin({name: &#39;ip&#39;, minChunks: Infinity}),

to plugins to ensure that ip.xxx.js is loaded first and avoid errors.

Disadvantages: This packaging has an obvious disadvantage, that is, the packaged files are compressed, making it inconvenient to modify the files twice. (No solution to compression was found)

CopyWebpackPlugin

The final solution is to separate the ip.js file from the modularization of the project, and then in index.html quoted separately. (This was the solution I thought of at the beginning, but it was not the solution I wanted, but I had no choice but to have limited knowledge and did not solve the previous problem).

Solution process:

First introduce CopyWebpackPlugin in webpack, configuration code:

new CopyWebpackPlugin([
  {from: &#39;./src/config/ip.js&#39;, to: &#39;ip.js&#39;},
 ])

Introduce it separately in index.html script tag, be sure to configure a random suffix, that is:

<script>
 document.write("<s"+"cript type=&#39;text/javascript&#39; src=&#39;./dist/ip.js?"+Math.random().toString(36).substr(2)+"&#39;></scr"+"ipt>");
</script>

to prevent ip.js from causing problems due to caching.

The above solves the problem of webpack packaging specified js separately.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of FastClick source code (detailed tutorial)

How to implement table content paging using vue and element-ui

How to use vue to convert timestamps into custom time formats

The above is the detailed content of How to package specified JS files separately in webpack. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to optimize Angular codeNext article：How to optimize Angular code

See more

How to package specified JS files separately in webpack

Related articles