跟我一起学习webpack(一)
跟我一起打包我们的第一个应用
第一步安装webpack
接下来我们新建文件
//add-content.js
export default function(){
document.write('hello world!')
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>myfirstewebpackdemo</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
//index.js
import addContent from './add-content'
document.write('My first webpack app <br/>')
addContent()
项目整个目录结构如下
接下来我们打包这个项目
使用命令很长很难记
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
我们会发现多出来dist文件夹
现在我们直接打开浏览器运行项目效果为
上面我们提到,打包的命令很难记很难记,现在我们可以使用npm script这个简化命令的方式去运行
我们修改package.json文件为
//package.json
{
"name": "firstwebpackdemo",
"version": "1.0.0",
"description": "webpack01",
"main": "index.js",
"scripts": {
"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
},
"keywords": [
"webpack"
],
"author": "jser_dimple",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
scripts是npm提供的脚本命令功能,在这里我们可以直接使用由模块所添加的指令
修改add-content.js文件
//add-content.js
export default function(){
document.write('i\m using npm scripts!')
}
重新打包项目,现在我就不需要那么复杂的命令了,只需要使用npm run build即可
运行项目效果为
我们分析项目目录,会发现这样是非常不合理的,项目对应的文件应该有专门的文件夹管理的
一般工程目录是放在源码src文件夹中的,输出的资源放在/dist文件夹中的
我们将index.js和add-content.js移动到src/js文件夹目录下
这个报错
后面了解到webpack默认的源代码的默认文件是src/index.js。我们只需要将index.js和add-content.js移动到src文件夹下
我们还需要修改package.json文件为
{
"name": "firstwebpackdemo",
"version": "1.0.0",
"description": "webpack01",
"main": "index.js",
"scripts": {
"build": "webpack --output-filename=bundle.js --mode=development"
},
"keywords": [
"webpack"
],
"author": "jser_dimple",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
现在我们运行npm run build命令是成功的
放下我的dmeo地址:https://github.com/JserJser/dailyPush/tree/master/dayly7/firstWebpackDemo
本文学习自:《webpack实战入门,进阶与调优》
跟我一起学习webpack(一)的更多相关文章
- [译]开始学习webpack
写在前面: 文章翻译自petehunt大神的petehunt/webpack-howto,作为学习webpack的开始.fork了一份,翻译后的在这里https://github.com/zjzhom ...
- 深入学习webpack(一)
深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了 ...
- webpack4 学习 --- webpack和webpack-dev-server
以前了解过webpack2, 所以对webpack 不是很陌生,就直接入主题吧.新建一个文件夹,就叫它webpack-tut吧.然后在文件中新建一个src 文件夹,存放我们的源文件,再在src 文件夹 ...
- 如何学习 Webpack
webpack-howto Tip: 本文是 webpack-howto 的原文,我觉得这篇文章写得非常好,确实算是目前学习 webpack 入门的必读文章.直接收录之. 本教程的目标 这是一本教你如 ...
- 深入学习webpack(二)
深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...
- 跟我一起学习webpack使用配置文件(二)
接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...
- 学习webpack基础笔记01
学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- 零基础学习webpack打包管理
这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
随机推荐
- springboot+mybatis 非web项目构建
https://blog.csdn.net/wlittlefive/article/details/86157134 https://blog.csdn.net/ththcc/article/deta ...
- CSS W3C统一验证工具
CssStats 是一个在线的 CSS 代码分析工具 网址是: http://www.cssstats.com/ 如果你想要更全面的,这个神奇,你值得拥有: W3C 统一验证工具: http://v ...
- spring 家族
spring家族:spring.springMVC .springBoots springCloud
- VC中编辑框更新SetDlgItemText()与UpdateData()的区别
SetDlgItemText(IDC_EDIT_RXDATA,m_strREData); //前一个是ID号,后一个是编辑框的成员变量 UpdateData(FALSE); 它们都能更新编辑框的 ...
- DNS的解析过程
1.什么是DNS 在互联网上,唯一标识一台计算机的是IP地址,但是IP地址不方便记忆,通过一个域名对应一个IP地址,来达到找到IP地址的目的,那么DNS就是将域名转换成IP地址的过程. 2.DNS查询 ...
- 如何HOOK桌面窗口消息
代码详见:http://download.csdn.net/detail/swanabin/6771465 需求:截获桌面窗口鼠标单击事件,解析所选中的桌面 Item,并将解析后的 item 信息发送 ...
- 1day:了解python
一.’计算机语言有哪些? 1.开发语言: 高级语言:Python,Java,PHP,C#,C++,(面向字节码) 低级语言:C.汇编(面向机器码) 备注:机器码是直接和计算机硬件沟通,字节码是通过解释 ...
- import socketserver 模块 (27-03)
使用socketserver实现并发聊天 服务端可以比喻做一部电话. ("127.0.0.1", 8000) 比喻做服务端的一个号码. 1,server.py import soc ...
- Spring 基于Aspectj切面表达式(6)
1 package com.proc; 2 3 import org.aspectj.lang.JoinPoint; 4 import org.aspectj.lang.ProceedingJoinP ...
- 六. Default arguments 参数默认值
示例: 注意点:函数是会默认声明参数变量的,所以不需要再重新声明一次,否则会报错 错误示例如下: 函数参数的传值方法: 需要注意的是:如果要给第二个参数传值,那第一个参数要传undefined,而不能 ...