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架构 ...
随机推荐
- [mysql5.6] 主从更换ip之后重新建立同步
情况时这样的: 主从系统 centos6.5 mysql5.6 由于机房迁移ip地址变了,导致原来的主动无法同步,于是需要重新建立主从关系. 主 192.168.1.23 从 192.168.1.22 ...
- Android绘图基础Paint和Canvas介绍-android学习之旅（六十一）
canvas介绍 Paint类介绍 代码示例 效果图
- 关于js校验，检验常见的比如：电话，数字，邮箱，手机号等等
/** 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9 ...
- Windows Server2012R2 添加Microsoft .NET Framework 3.5 功能失败的解决方法
最近部署了一台Windows Server2012R2的虚机,在安装sharepoint foundation 2013之前安装必备的组件的时候安装到一半报错了没有安装成功,后来发现原来是系统的.NE ...
- 15-5-23 下午02时22分58秒 CST> <Info> <Management> <BEA-141281> <unable to get file lock, will retry ...>
A-141281> <unable to get file lock, will retry ...> http://gdutlzh.blog.163.com/blog/s ...
- Mybatis接口编程原理分析（二）
在上一篇博客中 Mybatis接口编程原理分析(一)中我们介绍了MapperProxyFactory和MapperProxy,接下来我们要介绍的是MapperMethod MapperMethod:它 ...
- 调用awk的三种方式
调用awk的三种方式 调用awk有三种方式,一种为Shell命令行方式,另外两种是将awk程序写入脚本文件,然后执行该脚本文件.三种方式的命令格式归纳如下: 一.在Shell命令行输入命令调用awk, ...
- 版本控制之最佳实践（Git版）
现如今,应该每个开发者都在使用版本控制工具了吧.然而,如果你理解版本控制的基本规则,你便能更好地发挥它的效用.在此,我们汇总了一些最佳实践,希望你在使用Git做版本控制时能够了然于心.得心应手. 1. ...
- 【leetcode74】Sum of Two Integers（不用+，-求两数之和）
题目描述: 不用+,-求两个数的和 原文描述: Calculate the sum of two integers a and b, but you are not allowed to use th ...
- [WinForm]dataGridView自定动态设定序号列框
你可以在数据绑定或者行数有很大变化时测量一下DataGridView最大行数的行数的宽度然后在绘制代码如下 SolidBrush solidBrush; StringFormat stringForm ...