要搭建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前端开发环境搭建的更多相关文章

  1. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  2. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  3. Sentinel控制台前端开发环境搭建

    Sentinel:分布式系统的流量防卫兵. 官网:https://sentinelguard.io Github:https://github.com/alibaba/sentinel Wiki:ht ...

  4. webpack+angular2开发环境搭建

    升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...

  5. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  6. React+Webpack+Webstorm开发环境搭建

    需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...

  7. React前端开发环境搭建

    先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法. 我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样 ...

  8. grunt 前端开发环境搭建

    1.找管理员开通gitlab权限 2.下载并安装git工具 3.下载并安装nodejs 4.安装cnpm 5.安装kulor-cli cnpm install -g kulor-cli cnpm in ...

  9. TypeScript + Webpack 4 开发环境搭建(转)

    前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板,生成的项目使用的默认语言是 TypeScript,虽然以前在此之前并没有用过TypeS ...

随机推荐

  1. 版本控制，django缓存，跨域问题解决

    复习 分页: 1. 简单分页 2. 偏移分页 3. 加密分页 解析器:客户处理前端提交来的数据 urlencode: body体中的数据格式: key=value& formdata编码:为区 ...

  2. JSP中客户端跳转与服务器端跳转的区别

    转载自:https://www.cnblogs.com/memewry/archive/2012/08/21/2649988.html 客户端跳转时用HttPservletResopse对象的send ...

  3. spyder中让生成的图像单独在窗口中显示

    IPython 支持两种形式的绘图 终端输出图像新窗口输出图像方式 1 能够非常方便的保存输出记录(如将`IPython 终端输出转换成 Html 文件) 方式 2 则可以交互式的放大.拖动图片,并且 ...

  4. HTML5-2

    1 html5新增表单元素 <form> <!-- 数字 还有箭头,可以加减数字 并且可以设置最大最小值 --> <input type="number&quo ...

  5. OpenCV(一):集成

    开这个系列文章,记录自己在项目中使用OpenCV所走的步骤流程,方便以后再次使用.如果有不正确的地方,欢迎指正. OpenCV在其官网上,已经发布有iOS版的库,但是只有核心模块的功能,扩展模块(比如 ...

  6. react-redux-action

    Action 是把数据从应用(view等)传到 store 的有效载荷,store.dispatch() 将 action 传到 store. //尽量减少在 action 中传递的数据//actio ...

  7. C语言采用socket实现http post方式上传json数据

    1.按照HTTP协议发送请求: http POST 报文格式 http 报文是面向文本的. 报文分为:请求报文和响应报文 请求报文由:请求行,请求头部,空行和请求数据四个部分组成. <1.请求行 ...

  8. 12月4日学习爬虫007.使用Urllib模块进行简单网页爬取

    笔记如下: 1.https是http加强版协议(安全协议)http(普通网络通信协议) 爬数据 如果爬https发现和理想中的数据不同,可以改为http 直接去掉s即可 2.使用Urllib爬取简单网 ...

  9. ecplise的Jsp红叉错误消除

    当做项目的时候,引入的jsp文件可能会出现红叉的情况,重新输入任意字符再删除,保存后恢复正常. 原因是由于jsp中的方法还没有实现,等方法写完之后,再使jsp文件重新处于编译状态,保存后恢复正常.

  10. (转) java 通过 jdbc 链接 ms sql server 中出现 "no suitable driver for ..."

    原文连接 : http://blog.csdn.net/stewen_001/article/details/19553173/ 前面是 基本操作步骤,按照原博主的方式进行操作即可...() 这里是需 ...