Index.html 和 main.js是怎么关联起来的

最新推荐文章于 2023-11-21 18:20:58 发布

追梦人wht

最新推荐文章于 2023-11-21 18:20:58 发布

阅读量1.7k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_35945526/article/details/117965241

版权

Vue CLI Webpack html-webpack-plugin 构建流程 chunks

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue新手在用vue-cli写项目时候会发现，项目目录下index.html并没有通过标签引入任何js。index.html如下：

<!DOCTYPE html>
<head>
</meta charsets="utf-8">
</meta name='viewport' content='width=device-width,user-scalable=no,scalable=1.0'>
<head>
<body>
  <div id="app"></div>
<body>

下面我们首先大概分析下，为什么执行npm run dev就会把文件打包到dist目录下呢？命令的设置是在package.json文件下的，打开package.json，找到scripts选项，可以看到npm run build实际执行的是node build/build.js。

我们看一下build.js是什么东东。打开build.js后在前面几行的位置会看见var webpack = require(‘webpack’)，原来这个文件里面引入了webpack(webpack是在一开始npm install时候安装的)，我们再全局搜索下webpack引入之后干了啥，可以看到后面有一句webpack(webpackConfig, function (err, stats) {…}，快看，webpack被调用了！传入了一个webpackConfig和一个很长的函数，先不管这个函数是什么，我们看看这个webpackConfig是啥？全局搜索webpackConfig会看到上面有这样一句var webpackConfig = require (’./webpack.prod.conf’)

分析webpack.prod.conf.js，我们首先要认识一个插件webpack-html-plugin，这个plugin是帮做我们配置html文件中js文件的引入的，有了这个plugin我们就不用再用在html中加入标签这么傻的方式引入js文件了。

html-webpack-plugin配置项：

this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false
  }, options);

chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

参考：
https://www.cnblogs.com/wonyun/p/6030090.html
https://www.jianshu.com/p/d9f39129dc81

追梦人wht

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Index.html 和 main.js是怎么关联起来的

vue新手在用vue-cli写项目时候会发现，项目目录下index.html并没有通过标签引入任何js。index.html如下：<!DOCTYPE html><head></meta charsets="utf-8"></meta name='viewport' content='width=device-width,user-scalable=no,scalable=1.0'><head><body> <div
复制链接

扫一扫