05 2019 档案
摘要：不使用模块化 1、util.js 封装了一个getFormatDate函数 2、a-util.js 封装了一个aGetFormateDate函数，这个函数使用了utils.js中的getFormatDate 3、a.js 使用了a-util.js中的aGetFormateDate util.js f
阅读全文
摘要：通过第一部分的学习，我们已经可以分析一个js的文件。这节课我们学习Dependencies Graph，也就是依赖图谱。对所有模块进行分析。先分析index.js。index.js里面引入了messgage.js。再去分析message，一层一层的去分析，要想实现这个效果，需要去写个函数。 cons
阅读全文
摘要：新建一个项目，再新建一个src文件夹，里面有三个文件，word.js,message.js,index.js word.js export const word = 'hello'; message.js message.js import { word } from './word.js'; co
阅读全文
摘要：loader和plugin有什么区别呢？什么是loader，什么是plugin。 当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候，这个时候，我们可以借助loader去帮我们处理引用的文件，这是loader的一个作用 当我们在做打包的时候，在某一些具体时刻上，比如打包结束后，我要
阅读全文
摘要：单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。 所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进行打包 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch
阅读全文
摘要：首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js 然后去配置eslint,检测react 安装 npm install babel-eslint --
阅读全文
摘要：index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
阅读全文
摘要：index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
阅读全文
摘要：2018年typescript发展的非常好，js是一门非常灵活的语言，所以一个功能，怎么写都能够写出来，但是这也会导致一个问题，不同人写js的方式不同，那么会导致同一个功能出现的代码风格会迥然不同。这样的话，如果是一个团队在做编程的过程中，每个人都按自己的语法去写代码的话，那么维护性就难以得到保证。
阅读全文
摘要：这节课讲解一下，在webpack打包过程中，怎么去使用一些环境变量。 首先我有一个打包配置的三个文件 "scripts": { "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",
阅读全文
摘要：在webpack打包过程中会去做一些代码上的兼容，或者打包过程的兼容，比如之前使用过的babel-polyfill这个工具，他解决了es6代码在低版本浏览器的兼容。这就是webpack中的垫片。他解决打包过程中一些兼容性的问题。这些兼容性的问题不仅仅是浏览器上的兼容性问题。还有一些其他的兼容性问题，
阅读全文
摘要：根据之前的配置，假设文件上传至服务器中，没有加hash，如果页面内容有更改，浏览器刷新的时候，请求的还是原先的文件，也就是浏览器的缓存，因为名字没有变。现在我们在上线的webpack配置中加上hash output:{ filename: '[name].[contenthash].js', chu
阅读全文
摘要：module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.resolve(__dirname, '../dist') } } 在看别人写的webpack，outpu
阅读全文
只有注册用户登录后才能阅读该文。
只有注册用户登录后才能阅读该文。
摘要：Code Splitting指的是代码分割，那么什么是代码分割，webpack和code splitting又有什么样的联系呢？ 使用npm run dev："webpack-dev-server --config ./build/webpack.dev.js。"，会看不到打包生成的dist目录。
阅读全文
摘要：当我们在开发一个项目的时候，我们一般用development这个环境进行项目的开发，在这个环境下，webpack使用dev-server，帮我们启用一个服务器，然后这个服务器里面还集成了一些，比如hmr这样的特性，只要我更改了代码，他会帮我们重新打包，然后我们代码的内容会实时的展示在对应的页面上，所
阅读全文