![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端工程化
webpack打包工具的使用
zlq_csdn
有志者自有千计万计,无志者只感千难万难。
展开
-
Gulp.js
gulp是 前端项目构建工具,也是基于Node.js 的自动 任务运行器;能够自动完成 JavaScript/coffee/css/less/sass/html/image 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务;gulp更高效(异步多任务)、更易于使用、插件高质量。原创 2020-01-29 10:00:06 · 414 阅读 · 0 评论 -
vue中关于webpack打包的详细理解
引言:当我们需要和后台分离部署的时候,必须配置config/index.js:用 vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置),解析如下:(1)项目中配置的config/index.js,有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解'use strict'// Template version: 1...原创 2019-11-02 20:26:38 · 1826 阅读 · 0 评论 -
创建基本的webpack 4.x 项目
具体流程如下:运行 npm init -y 快速初始化项目在项目根目录下创建 src 代码目录和 dist产品目录在 src 下创建 index.html使用 cnpm 安装 webpack,运行 cnpm i webpack webpack-cli -D全局运行 npm i cnpm -g注意:webpack 4.x 提供了约定大于配置的概念,目的是为了减少配...原创 2019-07-06 14:10:10 · 181 阅读 · 0 评论 -
webpack打包工具3(对各种文件的处理)
一、webpack实现对css文件的打包注意:webpack 只能打包处理 js 类型的文件,无法处理其他非 js 类型的文件。解决方法:我们需要手动安装一些合适的第三方 loader 加载器。打包 css 文件,需要安装:cnpm i style-loader css-loader -D在 webpack.config.js 配置文件中,新增一个配置节点,叫 module ,是一个对象,...原创 2019-04-16 16:54:11 · 1087 阅读 · 0 评论 -
webpack打包工具2
接上一篇:问题描述:在这之前,当我们代码有所变动,需要查看效果时,都需要输入完整的打包命令,难免会显得繁琐一些。首先需要在根目录下创建一个 webpack.config.js 文件在该文件中将 main.js 的入口和出口文件打包注意:将来的开发中几乎都在使用webpack.config.js配置文件来打包,我们需要熟练将其写出。在终端直接运行webpack即可如上图,表...原创 2019-04-16 08:53:02 · 733 阅读 · 0 评论 -
webpack打包工具1
接下来我将从使用jQuery的一个实例中出发,总结webpack在webstorm中使用方法:首先我们来建立最基本的项目文件,如下图:备注:其中webpack-study是项目文件名,src是我门项目中的资源文件,main.js 是项目的入口文件,index.js是项目的首页面。dist是将来我们打包好文件的存放出。接下来我们需要打开终端在当前目录下进行初始化,如下图:此时在我...原创 2019-04-16 08:18:00 · 1094 阅读 · 2 评论 -
webpack安装与使用
webpack介绍:WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。webpack主要是针对打包整合开发文件,在系统运行...转载 2019-04-14 17:02:28 · 213 阅读 · 0 评论