修改 index.js 内容，写一些 ES6 的语法： const arr = [new Promise(() => {}),new Promise(() => {}) ];arr.map(item => {console.log(item); })ES6 很强大，但目前并不是所有的浏览器都支持，所以需要用到 Babel，让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。来试一下吧，先安装需要用的 Babel 包： npm install babel-loader @babel/core -D配置 webpack.config.js，增加一条 rulues ：module: {ru...
故事是这样的 产品小姐姐：“我要做一堆小程序，一周上线一到两个没问题吧” 码畜小哥哥：“你他喵是不是傻，做那么多干什么” 产品小姐姐：“蹭些流量呀，用户量多了就可以考虑转化流量给公司的 App” 码畜小哥哥：“fuck 好的” 码畜小哥开始架构 小程序杂，放一个项目方便管理小程序多，代码要能够复用团队开发，代码风格要统一码畜小哥开始建项目 这是单个小程序的基本目录结构，没问题当一个项目有多个小程序的时候，好像也没...
前言 首先祝大家元宵节快乐，最近已经好久没有写过文章了，刚好趁着这几天刚刚上班，领导还没有来，偷偷的写一篇关于webpack搭建vue的博客。因为公司使用vue比较多，构建vue项目使用vue-cli显得有点臃肿，感觉还是自己配置比较好些，所以就有了这篇教程。由于水平有限，欢迎大家指正，一起进步。 新建项目 1.新建名为webpackconfig文件夹 2.使用命令 npm init -y在webpackconfig文件夹中生成package.josn 3.下载依赖包 npm i webpa...
面对日新月异的前端，我表示快学不动了:joy:。 Webpack 老早就已经更新到了 V4.x，前段时间 React 又推出了 hooks API。刚好春节在家里休假，时间比较空闲，还是赶紧把 React 技术栈这块补上。 网上有很多介绍 hooks 知识点的文章，但都比较零碎，基本只能写一些小 Demo 。还没有比较系统的，全新的基于 hooks 进行搭建实际项目的讲解。所以这里就从开发实际项目的角度，搭建起单页面 Web App 项目的基本脚手架，并基于 hooks API ...
本人webpack版本3.6，webpack-dev-server版本2.9.1，本人按照网上写的版本折腾两天都没通，无意间自己试通了，猜测网上大部分都是照本宣科，没有自己实践 webpack配置接口地址代理在项目开发中，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问链接，但是我们的接口地址是 http://www.xxx.com/save/post 这样的，我们这...
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。 解决办法如图： (1).修改 assetsPublicPath: ./ (2).打开webpack.prod.conf.js，在output：增加 publicPath: ./虽然解决了资源路...
前言 一开始接触webpack是因为使用Vue的关系，因为Vue的脚手架就是使用webpack构建的。刚开始的时候觉得webpack就是为了打包单页面而生的，后来想想，这么好的打包方案，只在单页面上使用是否太浪费资源了呢？如果能在传统多页面上使用webpack，开始效率是否会事半功倍呢？好在众多优秀的前端开发者已经写了许多demo和文章供人学习。我也写了一个小项目，希望对大家学习webpack有帮助。 好吧其实上面说的都是废话，接下来附上项目地...
选择一个合适的富文本编辑器对于一个前端项目至关重要，这次我基于Vue来开发我项目中的前端部分，经过权衡选择了tinymce。其在UI，功能都很适合，tinymce官方文档：点击打开链接； 引入tinymce 我选用的版本4.7.4 npm install tinymce -S将tinymce创建为Vue的组件，便于日后复用，创建组件editor.vue <template><textarea :id="id" :value="value"></textarea> </template> <script>// Import TinyMCEimport tinymce from tinymce/...
安装依赖的4种命令 生产依赖和开发 一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的 开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这...
在不明白CommonsChunkPlugin的使用情况下，直接上手webpack4的splitChunks，实在是难上加难。为了能更好的理解splitChunks的使用，必须出个题目，练练手，才能从中有所收获（下面的题目不考虑实际应用场景）： 从指定入口文件中提取公共文件CommonsChunkPlugin的实现： entry: {index:./src/index.js,index1:./src/index1.js,index2:./src/index2.js }, plugins: [new CommonsChunkPlugin({name:"common1",chunks:[index,index1,in...
目录结构copy-webpack-plugin工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。打包时保留这些静态资源，直接打包到制定文件夹 安装依赖cnpm install copy-webpack-plugin --save-dev webpack.config.js from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。to...
webpack.config.js在配置devtool时，webpack给我们提供了四种选项 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。eval-source-map:使用eval打包源文件模块，在同一...
在项目中经常会需要将一些接口的配合文件或者某些样式文件，分离出来单独打包，便于后期改动，这里我以css文件为例，介绍实现两种方法： 项目目录：如上图所示，现在我需要将项目中的scBtn.css文件单独打包出来。在不做任何配置，直接打包出来的css文件是压缩合并成了一个了，如下图，当我想要改某一个css文件时就不行了。方法一： 1、在bulid文件夹下建一个copy.js（这个js名称可以自定义）代码如下： var fs = require(fs); var...
本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具，通过入口文件递归遍历其依赖图谱，绝对是打包神器。 bar.jsexport default function bar() {// }foo.jsimport bar from ./bar;bar();通过如下，webpack配置很快实现打包。通过插件我们还可以实现文件压缩，开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试)。module.exports = {entry: ./foo.js,output: {filena...
当我使用angular-cli构建项目时,它会将所有项目文件捆绑到一个主要的主包中. 我在应用程序中使用了懒惰路由,一旦应用程序加载,我就可以导航. 有没有一种方法可以将主包分为多个基于懒惰加载的路由模块的文件？ 下面是角度-cli.json中的配置 {"project": {"version": "1.0.0-beta.15","name": "maddy-test-project"},"apps": [{"root": "src","outDir": "dist","assets": "styles/content","index": "default.htm","main": "main.ts...