Webapck项目开发基本构建及配置
1、创建项目文件夹 myapp
手动创建myapp，或mkdir myapp
2、cd myapp
3、npm init （初始化项目）
4、一路回车（关于项目信息的填写，可以不写，一路回车即可）
可以在此步骤中填写一些项目信息，也可以在第5步骤完成后填写
5、以上步骤结束，myapp文件夹中创建了package.json文件
package.json文件：
{
"name": "myapp",//项目名称
"version": "1.0.0",//项目版本号
"description": "startApp about books",//项目说明描述
"main": "index.js",//主文件（入口文件）
"scripts": {//指定一系列指令
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ada",//作者
"license": "ISC"//许可证
}
package.json文件是关于配置的一些说明，包括：
- 展示项目npm所依赖的包
- 项目的基本信息
6、npm install webpack --save-dev（安装webpack）
使用了 --save-dev 表示在开发环境中使用
安装完webapck会创建一个node_modules 文件夹，用来存放npm命令安装的软件，同时package.json 文件会记录该项目的元信息，以及一些依赖包信息等。
*注意：当前练习使用3版本webpack，4版本需要安装webpack-cli
7、创建页面文件index.html和入口文件index.js
创建一个index.html存放页面内容，放到 dist/ 目录下，创建一个index.js入口文件，放到 src/ 目录下。目录结构大概如下：
├── dist
│ └── index.html
├── node_modules
├── package.json
└── src
└── index.js
PS: 所谓入口文件就是从这个文件中引入的资源都会被Webpack统一打包处理，无论它是图片资源，样式资源，还是JS资源。Webpack会根据配置对不同类型的资源文件进行不同方式的处理。
8、在根目录下创建 webpack.config.js 文件
使页面文件index.html和入口文件index.js关联
webpack.config.js文件内容大致如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve( __dirname , 'dist' )
}
}
9、运行命令 webpack
在窗口输入 webpack 回车，则编译并打包相应的文件，当前的目录结构大致如下：
.
├── dist
│ ├── bundle.js
│ └── index.html
├── node_modules
├── package.json
├── src
│ └── index.js
└── webpack.config.js
10、在页面文件index.html引入bundle.js文件即可
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
*注意： 以上10个步骤结束，一个基本的项目已经构建完成
11、让页面自动刷新
npm install --save-dev webpack-dev-server
12、简单配置一下webpack.config.js文件，加上下面配置
module.exports = {
.....
devServer: {
contentBase: './dist',
watchContentBase: true
},
};
13、运行指令： webpack-dev-server
*注意： 完成以上步骤后，就可以进行基本的开发了，修改文件可实现页面自动刷新，之后有需要什么依赖和加载器可以按需安装并配置即可
Webapck项目开发基本构建及配置的更多相关文章
- [Openwrt 项目开发笔记]：MySQL配置（六）
[Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在本人的项目中,运行在路由器上的服务器采用Ngi ...
- vue项目开发，用webpack配置解决跨域问题
今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header hea ...
- node.js---sails项目开发（4）---配置MongoDB数据库连接
1.安装sails对mongo的依赖 npm install sails-mongo --save 2. 配置mongo连接 修改config/connections.js: module.expor ...
- 分布式项目开发-springmvc.xmll基础配置
基础步骤: 1 包扫描 2 驱动开发 3 视图解析器 4 文件上传解析器 5 拦截器 6 静态资源 <beans xmlns="http://www.springframework.o ...
- 分布式项目开发-spring-dao.xml基础配置
基础步骤: 1 数据源 2 sqlSessionFactory 3 MapperScan 打包. db.properties文件 db.username=root db.password=123456 ...
- 分布式项目开发-web.xml基础配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
- [openwrt 项目开发笔记]： 传送门
“Openwrt 项目开发笔记”系列传送门: [Openwrt 项目开发笔记]:Openwrt平台搭建(一) (2014-07-11 00:11) [Openwrt 项目开发笔记]:Openwrt平台 ...
- node.js---sails项目开发
http://sailsdoc.swift.ren/ 这里有 sails中文文档 node.js---sails项目开发(1)安装,启动sails node.js---sails项目开发(2)安装测试 ...
- SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。
熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...
随机推荐
- UNIX网络编程——sockatmark函数
每当收到一个带外数据时,就有一个与之关联的带外标记.这是发送进程发送带外字节时该字节在发送端普通数据流中的位置.在从套接字读入期间,接收进程通过调用sockatmark函数确定是否处于带外标记. #i ...
- Android开发学习之路--UI之ListView
这里再学习写android的ListView,其实我们都使用过ListView,就像手机的联系人,就是用的ListView了.下面就实现下简单的ListView吧,首先是xml文件中添加相关的代码: ...
- javascript 下拉列表 自动取值 无需value
<select id="applyType" name="$!{status.expression}" class="inp" onc ...
- J2EE进阶(八)Hibernate与延迟加载机制探究
Hibernate与延迟加载机制探究 前言 Hibernate对象关系映射提供延迟的与非延迟的对象初始化.非延迟加载在读取一个对象的时候会将与这个对象所有相关的其他对象一起读取出来.这有时会导致成百的 ...
- XMPP即时通讯资料记录
几天开始研究XMPP即时通讯的技术,来实现移动应用的计时聊天功能.记录下参考的博客地址,还挺详细的. http://blog.csdn.net/fhbystudy/article/details/16 ...
- flexbox基本原理
新版的flexbox规范分两部分:一部分是container,一部分是 items. flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`float: left;` 这样简单的布局要 ...
- Swift基础之PickerView（时间）选择器
代码讲解:(后面有额外代码讲解) 首页设计UIPickerView的样式设计: leftArray = ["花朵","颜色","形状"]; ...
- Order Management Useful Scripts
Listed some useful queries scripts for Oracle Order Management Flow. (For Order Management Detailed ...
- android 优化之布局优化
布局优化的思路很简单,尽量减少布局文件的层级,看过系统源码的都知道,Android view绘制都是逐层绘制的,所以布局的层级少了,decodeview的时候绘制工作自然就少了. 那么如何进行布局的优 ...
- 手把手带你画一个动态错误提示 Android自定义view
嗯..再差1篇就可以获得持之以恒徽章了,今天带大家画一个比较简单的view. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/504771 ...