学习webpack的第一天

娃娃爱学习
159 阅读1分钟

遇到问题1:

const page = process.env.page;中process哪里来的？

答案:是webpack的生成环境，也就是node环境中全局变量。

遇到问题2:

path.resolve(__dirname, `./../src/containers/${page}/index.js`) path: path.resolve(__dirname, '../dist/assets/') 中__dirname到底是什么？

答案:directory name 当前文件的目录。

-- directory
--index.js(使用__dirname)

遇到问题3:

[page]: path.resolve(__dirname, `../src/containers/${page}/index.js`) 这句中的[page]的括号能否去掉？

答案:不能，这个是和output中的filename中的[name]结合使用的。

filename: isProd ? `[name].[chunkhash].js` : '[name].js',

遇到问题4:

{
    test: /\.html$/,
    loader: 'html-loader',
    options: {
      attrs: [':src', ':data-src']
    }
}

这个loader中attrs: [':src', ':data-src']部分是什么作用？

答案: 将html资源文件扩充到data-src，能够让url-loader等loader能够正确处理data-src，并且能够是output中的publicPath也能够对data-src起作用。

遇到问题5:

webapck中output里面的 filename和chunkFilename有什么区别？

答案:chunkFilename 是无入口的chunk在输出时的文件名称，那么无入口的意思就是不是在entry中指明的文件，大部分在当我们入口文件所加入的异步/引用文件较多，或者本身文件太大，webpack打包时会进行代码分割，生成多个chunk，那么那些无入口的，webpack主动生成的chunk名字就是用chunkFilename。

遇到问题6:

webapck中output里面的 chunkhash和hash以及contenthash的区别？

答案:
1)简单来说就是hash和整个项目文件有关,比如output1只和chunk1.js有关，output2只和chunk2.js有关，那么使用hash打包文件时，chunk1.js内容改变，所有output1，output2都名称改变;
2) chunkhash和每个chunk文件的本身内容有关,那么上面那个例子，使用chunkhash作为打包filename，chunk1内容改变时，只有output1名称改变，output2名称不变
3)那么contenthash 计算与文件内容本身相关，主要用在css抽取css文件时。

详情请看：webpack中的hash、chunkhash、contenthash分别是什么

扩展知识点:

new Vue({
  render: h => h(App)
}).$mount('#app')
  1. h函数就是createElement函数，返回VNode虚拟节点;
  2. $mount(#app)是挂载函数，挂载到id=app的DOM节点上;
<%- include('../../components/layout/landpage-head.html') %>
  1. 这个预发是ejs,多数用来html页面的拼接
<link rel="dns-prefetch" href="//yun.tuia.cn">
  1. 中dns-prefetch是可帮助开发人员处理DNS解析延迟问题
.editorconfig配置文件
  1. 配置文件需要和vscode中的EditorConfig插件配合使用
  2. 改配置文件中主要内容有
    # 根文件
root = true

# every file
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
avatar
文章
阅读
粉丝