webpack前端开发环境搭建
要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行。
1. 首先建立一个工程目录,命名为,其目录结构如下:
其中dist目录用于存放生成的文件,src目录存放源代码。
2. 初始化项目
在工程目录中打开命令行,并输入
npm init
后面全部按回车键默认配置即可。
上述步骤后会在当前目录生成一个文件:package.json
3. 配置环境
(1) 修改package.json,防止工程被以外发布。
(2) 安装webpack
在当前目录打开命令行,输入如下指令
cnpm install --save-dev webpack webpack-cli webpack-dev-server
(4) 修改package.json,添加常用命令
(5)安装loaders
在当前目录打开命令行,输入如下指令
cnpm install --save-dev file-loader extract-loader html-loader
4. 开始编码
(1) 在工程中添加三个文件
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// index.js
import './index.html'; document.title = 'Hello webpack!';
// webpack.config.js
const path = require('path'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
module: {
rules: [{
test: /\.html$/,
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader']
}]
}
};
(2) 测试开发服务器
在当前目录打开命令窗口,输入命令
npm run start
此时浏览器会弹出一个页面,就是我们刚刚编写的页面:
接下来只需要在html页面中编写所需要的代码就可以了。
webpack前端开发环境搭建的更多相关文章
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- Sentinel控制台前端开发环境搭建
Sentinel:分布式系统的流量防卫兵. 官网:https://sentinelguard.io Github:https://github.com/alibaba/sentinel Wiki:ht ...
- webpack+angular2开发环境搭建
升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- React+Webpack+Webstorm开发环境搭建
需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...
- React前端开发环境搭建
先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法. 我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样 ...
- grunt 前端开发环境搭建
1.找管理员开通gitlab权限 2.下载并安装git工具 3.下载并安装nodejs 4.安装cnpm 5.安装kulor-cli cnpm install -g kulor-cli cnpm in ...
- TypeScript + Webpack 4 开发环境搭建(转)
前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板,生成的项目使用的默认语言是 TypeScript,虽然以前在此之前并没有用过TypeS ...
随机推荐
- Spvmn测试环境搭建及其安全性讨论
一.说明 这几天都在做设备的协议分析,然后看到有个叫Spvmn的不懂要怎么操作才能触发其操作过程,问了测试部的同事说也没有测试文档,自己研究了一下这里做个记录. 按我现在理解,各厂商有自己的私有协议. ...
- java-猜数字
package com.jijy.circle; import java.util.Scanner; import java.util.Random; public class demo5 { pub ...
- caioj.cn 3004:中山市第九届小学生信息学邀请赛试题 5.合并线段
CSDN的博客 友键 [题目描述] 有一条很长的尺子,上面标记着整数点的坐标.如: 现在给出n条线段,每条线段表示为x-y(x和y为整数,x<=y),两条线段能合并的条件是x-y,y-z,合并为 ...
- django的ORM
在项目根目录下运行 python manage.py shell 即可进入django的交互shell界面 查询 from my_app.models import MyTestModel datas ...
- 考研计算机复试笔试(数据结构/C语言简答题篇)
1.比较顺序存储结构和链式存储结构的优缺点,什么情况下链表比顺序表好? 顺序存储时相邻元素的存储单元的地址也相连,可以随机存取.优点是存储密度大,空间利用率高:缺点是插入或删除时不方便. 链式存储时相 ...
- SQL语句:如何让字符串转化数字
和前端联调的时候,突然出现一个状况,新增数据的时候,一直报系统错误,写下此文,留以后反复温习.菜鸟程序员一名~ 项目内容:新增产品信息 具体实现:1 获取基础信息,创建产品(调用接口传入的产品类型,如 ...
- [转]MYSQL 创建存储过程
MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...
- mybatis分页查询的万能模板
分页查询项目里太多了,而这种分页查询,在mybatis里面的配置几乎一模一样,今天就整理一个比较好和实用的模板,供以后直接Ctrl+C <select id="queryMember& ...
- “学习CSS布局” 笔记
学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...
- Java中的公平锁和非公平锁实现详解
前言 Java语言中有许多原生线程安全的数据结构,比如ArrayBlockingQueue.CopyOnWriteArrayList.LinkedBlockingQueue,它们线程安全的实现方式并非 ...