随笔分类 - webpack
配合node.js 的 一个前端js等文件的 打包工具
摘要：webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实 现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpack中使用之前需要先安装它： npm install --save-dev webpack-
阅读全文
摘要：在项目发布之前，我们必然需要对js等文件进行压缩处理，我们就对打包的js文件进行压缩，我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致。 修改webpack.config.js文件，使用插件： const uglifyJsPlugi
阅读全文
摘要：我们的index.html文件是存放在项目的根目录下的。但是 在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js 等文件也就没有意义了 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWeb
阅读全文
摘要：'使用一个最简单的插件，为打包的文件添加版权声明，该插件名字叫BannerPlugin，属于webpack自带的插件。 按照下面的方式来修改webpack.config.js的文件： 其实就是 最上面定义的 const path 和 最下面的 plugins 可以看到 其实就是写 ： plugins
阅读全文
摘要：在我们的webpack环境中集成Vuejs： 我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装，因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖： npm install vue --save 然后你就可以在JS文件中【一般有 new Vue 都要写 ， 或
阅读全文
摘要：include：导入 exclude：排除 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 { test: /\.m?js$/, exclude: /(node_modules|bower_components
阅读全文
摘要：如果你在CSS中引用了图片，那么： 这里两张照片 1张a 一张b a是大于8KB b 是小于8KB的： 直接打包会报错 我们需要 图片处理，我们使用url-loader来处理，依然先安装url-loader： npm install --save-dev url-loader 安装即可 版本自己加
阅读全文
摘要：如果我们希望在项目中使用less、scss、stylus来写样式， 我们这里以less为例，其他也是一样的。 我们还是先创建一个less文件，依然放在css文件夹中： 这里 创建了 Less 并且 写了 样式。 老样子 我们在入口写入依赖 让webpack解析并打包： 然后我们安装 对应的 load
阅读全文
摘要：新建一个s1.css 里面让body背景颜色显红色，那么就要打包一起生效，打包因为有入口js，所以我们就要在入口js添加依赖，然后加载用到loader 我们用npm安装css-loader，最后嵌入DOM显示 要用到 style-loader，这里的顺序肯定是 先 css-loader 后 styl
阅读全文
摘要：什么是loader？ “依赖” 这个词很重要 loader是webpack中一个非常核心的概念。 webpack用来做什么： 在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的 依赖。 但是，在开发中我们不仅仅有基本的js代码处理，我们也
阅读全文
摘要：如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可 以将这两个参数写到配置中，在运行时,直接读取。 创建一个webpack.config.js文件 【目前这个文件名是写死的】 const path = require('path') //请先执行 npm in
阅读全文
摘要：我们在工程新建两个文件夹，一个是 src 用于存放我们写的源文件，一个是 dist文件夹：用于存放之后打包的文件。 类似这样： 一般都是在src中写一个 项目的入口文件，一般叫 index.js 但我这写main.js 看得出即可。 因为src文件夹下写源文件 而且 有了入口文件，那么我们用webp
阅读全文
摘要：At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 我们从两个点来解释上面这句话：模块 和 打包
阅读全文
摘要：在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画 实现等，那个时候代码还是很少的。 以前的代码 直接将代码写在<script>标签中即可 随着ajax异步请求的出现，慢慢形成了前后端的分离 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维 护。但是这种维护方式
阅读全文
