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 ...
随机推荐
- gevent模块学习(二)
2. Queue类,常用用于Greenlet之间的异步共享 q = gevent.queue.Queue(maxsize=None, items=None) -> Queue 说明: 创建一个指 ...
- Win10安装LoadRunner11
一.下载 地址:http://www.51testing.com/?uid-4827-action-viewspace-itemid-225451 二.安装 本来想写,结果和别人的一样就不写了:htt ...
- 20175212童皓桢 Java实验二-面向对象程序设计实验报告
20175212童皓桢 Java实验二-面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设 ...
- 常被问到的十个 Java 面试题
在这篇文章中,我试图收录最有趣和最常见的问题.此外,我将为您提供正确的答案. 接下来,就让我们来看看这些问题. 1. 以满分十分来评估自己——你有多擅长 Java? 如果你并不完全确信你自己或是你对 ...
- ubuntu 系统开机执行脚本设置
在ubuntu 系统中常常有一些操作需要开机时手动去执行,有一些固定的脚本文件可以通过改写启动项脚本让系统启动时自动执行 方法: 编辑/etc/下的rc.local脚本,把对应的需要执行的脚本写在ex ...
- java多线程高并发知识总结
1. 计算机系统 使用高速缓存来作为内存与处理器之间的缓冲,将运算需要用到的数据复制到缓存中,让计算能快速进行:当运算结束后再从缓存同步回内存之中,这样处理器就无需等待缓慢的内存读写了. 缓 ...
- java 8 Lambda
警告: 初学者随笔, 请关闭此网页, 以免浪费你的时间
- react-native-router-flux
这是一个路由,可以用来做Android底部的导航栏,学Android的都知道,如果用原生的代码来 做导航栏,会很复杂,关系到很多复杂的知识. 接下来我就简单的说明一下如何插入和使用吧: 1.你要先依赖 ...
- 后端程序员必会常用Linux命令总结
1. 调整终端窗口大小: ctrl + '-' 缩小, ctrl + shift + '=' 放大. 2. command --help 查询命令详细 或者 man command 3.ls命令, ...
- 机器学习 xgboost 笔记
一.数据预处理.特征工程 类别变量 labelencoder就够了,使用onehotencoder反而会降低性能.其他处理方式还有均值编码(对于存在大量分类的特征,通过监督学习,生成数值变量).转换处 ...