随笔分类 - Webpack
摘要：当我们在开发一个项目的时候，我们一般用development这个环境进行项目的开发，在这个环境下，webpack使用dev-server，帮我们启用一个服务器，然后这个服务器里面还集成了一些，比如hmr这样的特性，只要我更改了代码，他会帮我们重新打包，然后我们代码的内容会实时的展示在对应的页面上，所
阅读全文
摘要：index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { console.log(item); }) index.html <!DOCTYPE html> <html lang="en">
阅读全文
摘要：Hot Module Replacement，热模块更新，很多时候会简写成HMR。 "scripts": { "start": "webpack-dev-server", }, 在加热更新之前，我们运行npm run start，会发现之前我们打包有个dist目录，为什么运行这个命令的时候，dist
阅读全文
摘要：entry顾名思义，就是打包的入口文件 module.exports = { // 这个文件要做打包，从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去，就配置在output这个对象里 output: { // 打包好的文件名字 filename: '
阅读全文
摘要：之前运行dist下的js，都是手动把index.html拷贝过去的，每次把dist文件夹删除，都需要将index.html拷贝进去，这样很麻烦，我们在webpack官方插件中找到HtmlWebpackPlugin module.exports = { /** * 打包模式，不配置会警告，但底层还是会
阅读全文
摘要：这篇我们了解下css-loader常用的配置项，要配置的话，use里面就不再是一个字符串了 // 打包模块不知道该怎么办，就去模块配置里面该怎么办 module: { // 规则 rules: [{ // 假设是以css结尾的，我需要一个load帮助我们去打包 test: /\.scss$/, //
阅读全文
摘要：当我们执行npm run bundle的时候输出了很多信息，那么这些信息都是什么意思呢 Hash: 221e7fd2e8bf82149df7 Version: webpack 4.30.0 Time: 141ms Built at: 2019-04-15 06:37:26 Asset Size Ch
阅读全文
摘要：webpack是基于node开发的模块打包工具，所以他本质上是由node实现的。 我们要保持node版本尽量的新，另一个要保持webpack版本尽量的新，高版本的webpack会利用新版本中的一些特性来提高他的打包速度，webpack作者也提到了，在某些复杂的打包环境下，用webpack4打包比老版
阅读全文
摘要：认识到webpack可以认识import,可以翻译index.js。可能我们就认为webpack就是js的一个翻译器。划重点，，，不是的。。。 webpack实际上称不上是一个翻译器，因为呢，他只认识import这样的语句，其它高级的js语法，他一概不认。所以把webpack看作一个js翻译器，实际
阅读全文
摘要：在很久很久以前，当我们写一个web网页的时候，js实现的逻辑相对是比较弱的。但随着前端技术的发展，前端能实现的内容越来越多。在js里面加了非常非常多的逻辑，于是呢，我们就发现我们通过这种面向过程的方式去写我们的代码。我们的代码就会变得非常的长。后面js里面的逻辑会被堆的越来越大，越来越大，最终变得不
阅读全文
摘要：随着前端工程越来越复杂，单独建几个文件写业务代码，这样的方式已经无法保证项目的可维护性了。 所以我们就想把不同的逻辑拆成模块，然后分开引入这些模块，每个模块自己做自己的事情，这样就可以保证项目的可维护性和拓展行。 所以我们就想把不同的逻辑拆成模块，然后分开引入这些模块，每个模块自己做自己的事情，这样
阅读全文