![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
苏先生前端
这个作者很懒,什么都没留下…
展开
-
前端工程化webpack介绍
常用的前端自动化工具 目的: 1、前端工程化是根据业务特点,将前端开发流程规范化,标准化,它包括了开发流程,技术选型,代码规范,构建发布等,用于提升前端工程师的开发效率和代码质量 2、实现前端工程化的目的简单来说就是通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作能力以及开发体验 常见的自动化构建工具 Grunt 、 gulp、 webpack、 Fis 自动...原创 2019-09-22 22:09:46 · 284 阅读 · 0 评论 -
webpack安装使用
webpack运行基于 node环境 git命令驱动 安装总思路 先安装全局下 -g 在下载项目下 -D 顶层步骤(全局) 建立目标文件夹 运行 git 首先下在全局webpack cnpm install webpack -g 下载webpack-cil 全局 npm install webpack -cli -g 此时运行...原创 2019-09-22 20:31:36 · 197 阅读 · 0 评论 -
webpack 模块导入导出方法总结
1、导入的模块的方法,只有两种方法 import和require() 。可以使用import导入的基本都可以使用require导入。 2、export default方法导出的,只能使用import导入。(ES6方法)webpack2.0以后基本都使用import的写法 详细介绍如下 第一种 export (这种方案可以把要导出的一起导出,也一个一个导出) let r...原创 2019-09-22 20:32:02 · 1288 阅读 · 0 评论 -
webpack 核心概念及其配置简介
友情提示: webpak 打包原理: 从设置的入口文件开始打包index.js文件所依赖的所有文件 比如:less文件等 所有依赖文件必须引入index.js文件中 import导入 文件之间要建立联系 首先创建webpack.config.js ===== 执行命令 webpack 出口:(可以单个或者多个) 入口起点(entry point)指示 webp...原创 2019-09-22 22:08:11 · 283 阅读 · 0 评论 -
webpack tree shaking postcss
对于package.json 中 设置script标签中 "dev": "webpack --mode development", "prod": "webpack --mode production" //执行git时 运行 npm run dev 以此运行对应的模式 js-tree-shaking tree-shaking技术,能够在模块的层面上做到打包后的代码只包含被引用并...原创 2019-09-24 11:30:19 · 165 阅读 · 0 评论 -
webpack 提取公共js代码 与js tree-shaking区别
解析 首先提取公共js代码块 是针对于多入口的项目配置 配置如下: 自定义的js代码块 name: 指定打包出来文件的名称 chunks:查找范围 minSize:1 打包文件的大小 minChunks: 指明模块被引用多少次为公共模块 priority:1 指明优先级 当有多个公共模块时候 output: { path: path.resolve(__d...原创 2019-09-24 11:41:18 · 398 阅读 · 0 评论 -
webpack 开启本地服务器 hot module replace
操作步骤 1、首先安装全局server npm install webpack-dev-server -g 2、下载局部 npm install webpack-dev-server -D 3、开启服务器 对所有除了配置文件之外的所有的文件进行实施监听 触发页面刷新(全局更新) webpack-dev-server 4、适当配置 devServer:{ port:...原创 2019-09-25 20:16:41 · 364 阅读 · 0 评论 -
配置webpack具体步骤及其完整配置
var path = require('path'); //抽离css var MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离html var HtmlWebpackPlugin = require('html-webpack-plugin'); //css-tree-shaking var glob = requi...原创 2019-09-25 22:11:29 · 193 阅读 · 0 评论