What needs to be done to package specified JS files with webpack-JS Tutorial-php.cn

What needs to be done to package specified JS files with webpack

php中世界最好的语言

Release： 2018-03-17 15:25:23

Original

1695 people have browsed it

This time I will show you how to package the specified JS file with webpack. What are the precautions for packaging the specified JS file with webpack? The following is a practical case, let's take a look.

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

Configuration file Take it 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: './dist/', //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: '[name].[chunkhash].js', // 输出文件名
 chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
 }
}

Copy after login

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>

Copy after login

}

webpack itself is based on

Modularization, so in most cases, we only need one entry file. 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
 },

Copy after login

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: 'ip', minChunks: Infinity}),

Copy after login

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: './src/config/ip.js', to: 'ip.js'},
 ])

Copy after login

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>

Copy after login

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

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

ps: I hope there is a better way to share it with me.

This webpack method of packaging specified JS files separately is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support Script Home.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!