手撸 webpack4.x 配置(一)
现在的前端开发框架 ,都绕不开 webpack 打包 。 但绝大数前端开发人员 基本都是用 脚手架 自动生成 一套开发环境 如: vue-cli , create-react-app等 , 但开发中总会遇到各种问题 ,基本都是 webpack 配置问题 , 每次遇到基本都是头疼的问题 ,根本不敢动里面的配置文件 。所以出于以后开发中 更好的理解 wepback配置问题 ,决定自己搭建一套 前端开发环境 !
一 先到node官方网站 下载 node
node官网: nodejs.org/en/
个人建议 下载稳定版本的即可 ,无需最新版的 !
新建文件夹 ( webpack-demo1 )
先创建两个文件 webpack-demo/src/index.js
二 安装webpack
(1) 全局安装
npm install webpack webpack-cli -gwebpack -v // 查看是否安装成功复制代码
(2) 局部安装 安装项目中 (webpack-demo1) 里
进入 webpack-demo 目录 ,这里我们先初始化一个工程
npm init 复制代码
这里一路 回车就可以了 , 最后一个 yes 就初始化完了
npm install webpack webpack-cli --save-dev // 或者 npm install webpack webpack-cli -D 复制代码
这样的话 webpack 就安装到项目中了 。
webpack -v // 这波操作 其实打印出来的 版本还是 全局的复制代码
我们可以先把全局 webpack 删除 来测试下
npm uninstall webpack webpack-cli -g复制代码
这时我们再在终端里 输入:
webpack -v 复制代码
不管是在全局还是项目中 都会报错
这里稍微有一点变化 , 我们进入项目(webpack-demo1)中输入 :
npx webpack -v // 这时就可以正确的显示 项目中安装的 webpack 版本号复制代码
这时我们就可以安装一些 依赖包了
npm install 复制代码
这时你的文件目录应该就和我的一样了
其实这时我们可以在 项目中 新建 (webpack-demo1/index.js) 文件 ,输入: console.log("ok");
这样我们就可以打包了 。
npm webpack index.js复制代码
这时项目中 就会多个 dist 目录 里面有 main.js 文件
说明我们已经打包成功了 ,这是 webpack 给我们默认的配置。
三 修改 webpack打包配置
这时我们需要新建一个 配置文件 ( webpack-demo1/webpack.config.js )
const path = require('path');
module.exports = { entry: './src/index.js', // 打包的入口文件 output: { path: path.resolve(__dirname, 'dist'), // 打包后的文件目录 filename: 'bundle.js' // 打包后生成的 JS 文件 }};复制代码
这时我们把打报入口改为 src/index.js 文件了
npx webpack src/index.js 复制代码
同样可以成功打包 !
我们修改下 打包命令 ,打开 package.json文件
{ "name": "webpack-demo1", "version": "1.0.0", "description": "", "scripts": { "build": "webpack" // 注意这一行 }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.29.6", "webpack-cli": "^3.2.3" }}复制代码
这时候 我们就可以愉快的打包了
npm run build复制代码
同样的可以成功打包。
webpack 其实只是JS文件打包工具 , 但这很显然是远远不够的 ,工作中我们需要打包各种各样的 静态资源 !
那就需要我们的 loader 插件了 !
四 安装 loader 打包 图片资源
npm install file-loader --save-dve复制代码
这里我们继续修改 package.json 配置文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: { path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{ loader: 'file-loader', options: {}
}]
}
]
}
};复制代码
这是我们的配置就已经完成了 ,接下来我们可以测试下
打开 webpack-demo1/index.js 文件
import file from './assets/file.jpg'复制代码
这时候 我们在打包 , 这里我们需要 在 dist 目录下 新建 index.html 文件把 bundle.js文件引入里面 !
打开 index.html 我们就可以看到 我们的图片了 !
大家也可以使用安装 ( url-loader )
npm install url-loader --save-dev复制代码
主: file-loader 能做的 , url-loader 都可以做到
只有一点区别
module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192 //区别: 当图片小于 8192时 , 会自动转化为 base64 位 引入方式 !}}]}]}
}复制代码
准备下班了 , 简单描述 , 直接贴代码了 !
五 安装 loader 打包 css 样式资源
同样安装
npm install css-loader style-loader --save-dev
复制代码
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {}
}]
},
{
test: /\.(css)$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
},
{
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}
]
}
]
}
};复制代码
这样我们就可以打包 样式文件了 。
这里我们也可以安装 css 预处理器 ( 如: less, sass, stylus )
npm install stylus stylus-loader --save-dev复制代码
我们把上面的 配置文件稍微的改变下 就可以了
改天继续完善 - 要下班了 !
请大神门手下留情 , 本人也是刚刚学习 webpack 配置 哈哈 !
第一次写博客 , 代码被压缩了 不知为什么 ? 求大神们指点 ,所以最后贴图了 !
转载于:https://juejin.im/post/5c88afcff265da2dc538f7e0
手撸 webpack4.x 配置(一)相关推荐
- 超级详细的手写webpack4配置来启动vue2项目(附配置作用)
基础目录结构以及各个文件的作用 初始npm项目 npm init 一路回车,一律使用默认的npm项目配置 package.json修改scripts 如下: {"name": &q ...
- 在用安全框架前,我想先让你手撸一个登陆认证
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 转自:RudeCrab, 链接:blog.csdn.net ...
- 如何手撸一个较为完整的RPC框架
[文章作者/来源]一个没有追求的技术人/https://sourl.cn/sJ4Brp 缘 起 最近在公司分享了手撸RPC,因此做一个总结. 概 念 篇 RPC 是什么? RPC 称远程过程调用(Re ...
- 【手撸RPC框架】SpringBoot+Netty4实现RPC框架
[手撸RPC框架]SpringBoot+Netty4实现RPC框架 线程模型1:传统阻塞 I/O 服务模型 模型特点: 采用阻塞IO模式获取输入的数据 每个链接都需要独立的线程完成数据的输入,业务处理 ...
- 99%的程序员都在用Lombok,原理竟然这么简单?我也手撸了一个!|建议收藏
世界上只有一种英雄主义,就是看清生活的真相之后依然热爱生活. 对于 Lombok 我相信大部分人都不陌生,但对于它的实现原理以及缺点却鲜为人知,而本文将会从 Lombok 的原理出发,手撸一个简易版的 ...
- 99%的程序员都在用Lombok,原理竟然这么简单?我也手撸了一个!|建议收藏!!!...
世界上只有一种英雄主义,就是看清生活的真相之后依然热爱生活. 对于 Lombok 我相信大部分人都不陌生,但对于它的实现原理以及缺点却鲜为人知,而本文将会从 Lombok 的原理出发,手撸一个简易版的 ...
- 五分钟,手撸一个Spring容器!
Spring是我们最常用的开源框架,经过多年发展,Spring已经发展成枝繁叶茂的大树,让我们难以窥其全貌. 这节,我们回归Spring的本质,五分钟手撸一个Spring容器,揭开Spring神秘的面 ...
- 99%的程序员都在用Lombok,原理竟然这么简单?我也手撸了一个!
世界上只有一种英雄主义,就是看清生活的真相之后依然热爱生活. 对于 Lombok 我相信大部分人都不陌生,但对于它的实现原理以及缺点却鲜为人知,而本文将会从 Lombok 的原理出发,手撸一个简易版的 ...
- umi脚手架搭建的项目_还在从零开始搭建项目?手撸了款快速开发脚手架!
之前开源了一款项目骨架mall-tiny,完整继承了mall项目的整个技术栈.总感觉mall-tiny集成了太多中间件,过于复杂了.这次对其进行了简化和升级,使它成为了一款拥有完整权限管理功能的快速开 ...
最新文章
- device刷机包 适合的android_nexus6 刷 LineageOS 17.1 实战
- 队列不存在,或您没有足够的权限执行该操作-另一种原因
- 用cookie实现localstorage功能
- oracle简单序列,-30天下载
- 5002.boost库之thread
- 自监督学习推荐系统综述: 150篇自监督推荐系统文献概述四大类方法(含开源算法库SELFRec)...
- 旋转区域_高空旋转雾化机雾桩应用场所、高压喷雾立杆式降尘设备,高压微雾除尘系统原理以及优势...
- wps表格在拟合曲线找点_用excel寻找拟合曲线上的某一点的使用方法
- 换信科技B2B供应链平台“换易宝”1.0产品上线发布会盛大召开
- 3DS MAX 批量导出文件脚本 MAXScript 带界面
- 关于近段时间学习历史的点滴记录
- matlab中欧姆怎么表示,电阻的单位为欧姆,用符号()表示。 - 问答库
- 如何寻找“真爱”型合伙人
- 一文带你掌握监控进程技术实现
- 大数据小项目之电视收视率企业项目06
- 看看你去苹果公司的话能挣多少钱
- python容器结构 —— list - 列表篇 看这一篇就够了!
- php、git、redis函数合集
- Windows系统如何部署Rabbit和启动Rabbit服务
- 以色列顶级货运公司Zim向所有客户开放区块链平台
热门文章
- linux下的文件和文件夹的权限问题
- 在 Linux 中查看时区
- 【Big Data】HADOOP集群的配置(一)
- stm32时钟树讲解
- 防止熊猫烧香的微软补丁
- Asp.Net Core写个共享磁盘文件Web查看器
- linux成长笔录——week_1
- The JVM Architecture Explained-JVM架构解析(译)
- Python开发环境配置
- c#中总是提示“在代码运行时或者在禁用“只要一个进程中断,就中断所有进程”选项时,不允许进行更改。...