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架构 ...
随机推荐
- 卸载linux后出现grub rescue怎么办？
原文转自:http://zhidao.baidu.com/link?url=9e2mOttgV0IJDMml58SFbV-7XOvVzp2jR5l1n3ltFOzX1XAcp5-t-QQPc-Nozy ...
- java虚拟机工具入门
jps 能显示现在都有那些java程序运行 C:\Users\Administrator>jps 16964 DeadLockJstack 9172 PULSEI~1.JAR 19392 Jps ...
- 【一天一道LeetCode】#169. Majority Element
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- ROS_Kinetic_20 ROS基础补充
ROS_Kinetic_20 ROS基础补充 1 手动创建ROS功能包 参考官网:http://wiki.ros.org/cn/ROS/Tutorials/Creating%20a%20Package ...
- Android初级教程小案例之单选框RadioGroup与复选框CheckBox
Android里面的单选框和html中的其实是一样的效果.这里用到两个控件:CheckBox和RadioGroup.直接上代码: radio.xml布局文件: <?xml version=&qu ...
- HBase作为存储方案
HBase存储特点 * Client 1. 包含访问HBase的接口,并维护cache来加快对HBase的访问,比如region的位置信息. * Zookeeper: 1. 选举集群中的Master, ...
- Java 8新特性探究（五）Base64详解
BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且很容易破解,他核心作用应该是传输数据的正确性,有些网关或系统只能使 ...
- Oracle中job的实例
一.Oracle定时器(Job)各时间段写法汇总 对于DBA来说,数据库Job再熟悉不过了,因为经常要数据库定时的自动执行一些脚本,或做数据库备份,或做数据的提炼,或做数据库的性能优化,包括重建索引等 ...
- 跨平台移动APP开发进阶(四)AngularJS简介
AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件. 它的创新点在于,利用 数据绑定 和 依赖注入 ...
- C语言实现的猜数字小游戏（主要是对于自定义函数的运用）
#include <stdio.h> #include <stdlib.h> #include<time.h>//加上此头文件的作用是什么?另外不加的话有什么影响? ...