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项目开发基本构建及配置的更多相关文章

  1. [Openwrt 项目开发笔记]：MySQL配置（六）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在本人的项目中,运行在路由器上的服务器采用Ngi ...

  2. vue项目开发，用webpack配置解决跨域问题

    今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header hea ...

  3. node.js---sails项目开发（4）---配置MongoDB数据库连接

    1.安装sails对mongo的依赖 npm install sails-mongo --save 2. 配置mongo连接 修改config/connections.js: module.expor ...

  4. 分布式项目开发-springmvc.xmll基础配置

    基础步骤: 1 包扫描 2 驱动开发 3 视图解析器 4 文件上传解析器 5 拦截器 6 静态资源 <beans xmlns="http://www.springframework.o ...

  5. 分布式项目开发-spring-dao.xml基础配置

    基础步骤: 1 数据源 2 sqlSessionFactory 3 MapperScan 打包. db.properties文件 db.username=root db.password=123456 ...

  6. 分布式项目开发-web.xml基础配置

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  7. [openwrt 项目开发笔记]： 传送门

    “Openwrt 项目开发笔记”系列传送门: [Openwrt 项目开发笔记]:Openwrt平台搭建(一) (2014-07-11 00:11) [Openwrt 项目开发笔记]:Openwrt平台 ...

  8. node.js---sails项目开发

    http://sailsdoc.swift.ren/ 这里有 sails中文文档 node.js---sails项目开发(1)安装,启动sails node.js---sails项目开发(2)安装测试 ...

  9. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

随机推荐

  1. Docker教程：dokcer machine的概念和安装

    http://blog.csdn.net/pipisorry/article/details/50920982 Docker machine介绍 做为Docker容器集群管理三剑客之一的Docker ...

  2. R12: Improving Performance of General Ledger and Journal Import (Doc ID 858725.1 ）

    In this Document   Purpose   Scope   Details   A) Database Init.ora Parameters   B) Concurrent Progr ...

  3. java设计模式---桥接模式

    桥接模式的目的是把抽象和具体实现分离,其uml类图如下所示: public interface SendMessage { abstract void send(String message,Stri ...

  4. Java函数2:计算两个日期相差的天数

    import java.util.Scanner; public class HelloWorld { public static void main(String[] args){ // Scann ...

  5. JAVA之旅（十九）——ListIterator列表迭代器，List的三个子类对象，Vector的枚举，LinkedList,ArrayList和LinkedList的小练习

    JAVA之旅(十九)--ListIterator列表迭代器,List的三个子类对象,Vector的枚举,LinkedList,ArrayList和LinkedList的小练习 关于数据结构,所讲的知识 ...

  6. 12、Libgdx的图像之全屏和垂直同步

    (官网:www.libgdx.cn) 检测当前设置 判断是否设置全屏,可以通过如下方式: boolean fullscreen = Gdx.graphics.isFullscreen(); 设置全屏和 ...

  7. [Android编程心得] Camera（OpenCV）自动对焦和触摸对焦的实现

    写在前面 最近在从零开始写一个移动端的AR系统,坑实在是太多了!!!整个项目使用了OpenCV第三方库,但对于摄像机来说,和原生Camera的方法基本相同. 实现 以OpenCV的JavaCamera ...

  8. Ext.Net 1.x_Ext.Net.GridPanel之Access数据库分页显示

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  9. How Many Processes Should Be Set For The Receiving Transaction Manager (RTM)

    In this Document   Goal   Solution   References APPLIES TO: Oracle Inventory Management - Version 10 ...

  10. Java进阶(二十)解疑答惑之何时字符串才算真正为空？

    解疑答惑之何时字符串才算真正为空? 在一次编码过程中,有一个现象一直困扰着自己,经过后台的不断调试,才发现原来有时候字符串的空非空.测试代码如下: // medname可为药品名称或药品ID Stri ...