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架构 ...
随机推荐
- Spark技术内幕：一个图搞定Spark到底有多少行代码
Spark1.0.0发布一个多月了,那么它有多少行代码(Line of Code, LOC)? 注:代码统计未包含测试,sample.
- 利用OpenCV的人脸检测给头像带上圣诞帽
我们来看下效果 原图: 效果: 原理其实很简单: 采用一张圣诞帽的png图像作为素材, 利用png图像背景是透明的,贴在背景图片上就是戴帽子的效果了. 人脸检测的目的主要是为了确定贴帽子的位置,类似p ...
- Fragment详解-android学习之旅（四十八）
Fragment的设计哲学 Fragment的继承体系 Fragment的开发 大部分都会继承如下的三个方法 Fragment与Activity的通信 Fragment与Activity交互信息 Fr ...
- MySql下视图的创建
(1).第一类:create view v as select * from table; (2).第二类:create view v as select id,name,age from ta ...
- 最简单的基于FFmpeg的AVfilter例子（水印叠加）
===================================================== 最简单的基于FFmpeg的AVfilter例子系列文章: 最简单的基于FFmpeg的AVfi ...
- 尚学堂马士兵struts2 课堂笔记(四)
27 结果类型 主要就四种种 dispatch和rediret chain和drdirectaction <package name="resultTypes" namesp ...
- Linux信号实践(1) --Linux信号编程概述
中断 中断是系统对于异步事件的响应, 进程执行代码的过程中可以随时被打断,然后去执行异常处理程序; 计算机系统的中断场景:中断源发出中断信号 -> CPU判断中断是否屏蔽屏蔽以及保护现场 -&g ...
- android binder理解
Android中的Parcel是什么 Parcel,翻译过来是"打包"的意思.打包干什么呢?是为了序列化. 如果要在进程之间传递一个整数,很简单,直接传就是行了:如果要传 ...
- Android Studio查看应用数字签名-android学习之旅(76)
Android Studio和Eclispe还是有比较大的区别,在这地方,eclipse可以直接在设置里面,而AS就需要通过Terminal来查看 步骤 1.首先定位到.android 一般都是在C盘 ...
- Leetcode_111_Minimum Depth of Binary Tree
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41964249 Minimum Depth of Binar ...