1.webpack是一个基于node的项目,所以先装好node和npm

      参考我的随笔：https://www.cnblogs.com/jtnote/p/6230384.html

2.先创建项目目录结构，根目录是mywebpack。进入项目根目录，执行：npm init，生成package.json文件，内容就是一堆json数据，基本就是在终端里输入的信息。

3.进入项目根目录局部安装webpack，进入./mywebpack，执行：npm install webpack --save-dev，局部安装webpack成功了，根目录下会出现一个node_modules文件夹

4.如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

5.在项目文件夹下新建webpack.config.js文件，比较简单的配置如下。

  • entry:表示入口文件，可以有多个入口文件。文件中包含所有逻辑代码，依赖的其他文件如css，js等。
  • output：将入口文件打包、编译输出的文件，是页面最终引入的文件。
var path = require('path');

 var config= {

    entry: path.resolve(__dirname, 'index.js'),

    output: {

        path: path.resolve(__dirname, './dist'),

        filename: 'index.js',

    },

};

module.exports = config;

6.在项目跟目录创建index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>my_program</title>

</head>

<body>

   <div id="app">

       helloworld

   </div>

<script type="text/javascript" src="./dist/index.js"></script>

</body>

</html>

7.在项目跟目录创建index.js文件作为入口文件

document.getElementById("app").innerHTML="hello webpack";

8.设置webpack-dev-server

　　在开发时，每次更改文件后要运行npm run build 来重新编译、打包文件，无聊又麻烦。我们可以设置 webpack-dev-server来让他自动运行。webpack-dev-server 主要是启动了一个使用 express 的 Http服务器 ，它的作用主要是用来伺服资源文件 。此外这个 Http服务器 和 client 使用了 websocket 通讯协议，原始文件作出改动后， webpack-dev-server 会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。在webpack.config.js配置文件中增加入口命令可以使文件变化时浏览器自动刷新。

　　首先要安装它 npm install webpack-dev-server --save-dev。然后在package.json文件的scripts部分增加快捷指令：

1 "scripts": {

2      "dev": "webpack-dev-server --host 127.0.0.1 --port 8080 --open  --config webpack.config.js"

3  },

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值，即可启动webpack服务器监听。这些指令的意思：

　　webpack-dev-server：在127.0.0.1:8080 建立一个 Web 服务器。

　　--devtool eval: 为你的代码创建原地址。当有任何报错的时候可以让你更精确的定位到文件和行号。

　　--progress： 显示编译的输出内容进度。

　　--compress: 启用gzip压缩。

　　--hot:热替换，开发过程中任何前端代码的更改都会实时的在浏览器中表现出来，不需要手动刷新。

　　--colors：显示编译的输出内容颜色。

　　--inline：webpack提供两种自动刷新模式 iframe/inline。默认iframe。

详细请参考 开发中 Server(DevServer) 

运行 npm run dev，浏览器打开视图显示： hello webpack

webpack安装和简单配置的更多相关文章

  1. docker的安装和简单配置

    docker的安装和简单配置 docker是balabalabala...懒得介绍. 国内安装docker很蛋疼,按照官方配置好了软件源之后,几十MB的安装文件下载要半天,没办法,docker默认的软 ...

  2. <转载> FreeNAS的安装和简单配置 http://freenas.cn/?p=342

    前些日子在公司搭了一个模拟生产环境的平台.由于是测试环境,资源有限只能使用虚拟机实现,所以存储这块就想到了使用FreeNAS.很早以前玩儿过几次,当时是生产环境需要上存储设备,经过对比还是选择的更可靠 ...

  3. Keepalived 安装与简单配置

    Keepalived 安装与简单配置 http://sivxy.lofter.com/post/1d21ebb9_7e15000

  4. Linux下的GitHub安装与简单配置教程 ~ 转载

    Linux下的GitHub安装与简单配置教程   1.GitHub简介 Git是一个分布式版本控制系统,与其相对的是CVS.SVN等集中式的版本控制系统. 2.Git的安装 1)安装Git a.查看与 ...

  5. Manjaro安装后简单配置

    一个相见恨晚的 Linux 操作系统 Manjaro 到底有多受欢迎? DistroWatch是一个包含了各种Linux发行版及其他自由/开放源代码的类Unix操作系统. (如OpenSolaris. ...

  6. lnmp源码安装以及简单配置

    nginx 软件: a: openssl-1.0.1r.tar.gz tar zxf openssl-1.0.1r.tar.gz b: pcre-8.32.tar.gz tar zxf openssl ...

  7. python的IDE(pycharm)安装以及简单配置

    使用IDE的好处 界面更友好,看起来更舒服 智能提示功能很赞,大大提高开发效率 pycharm的安装过程 去pycharm官网下载安装包,请下载专业版,建议不要去网上下载汉化版 点击安装包一直下一步即 ...

  8. Ikuai路由安装及简单配置 v1.0

    第一部分:创建虚拟机: 1.点击创建新的虚拟机   2.选择自定义模式创建(选择经典模式会更友好一些),然后点击下一步 3.下图内容不用管,直接点击下一步:   4.这里是选择安装系统路径.在这里我们 ...

  9. Django安装与简单配置(1)

    目录 1. 环境准备 2. 开始安装 2.1 安装Django 2.2 安装 Mysql数据库 3. 开始配置 3.1 Django简单配置 3.1.1 创建一个工程(project)为devops: ...

随机推荐

  1. Linux下中断程序导致写文件失败的分析

    案例: 一个普通linux C程序,执行期间会进行多次printf操作,利用bash脚本重定向功能,将stdout重定向到一个另一个文件中去.在运行途中用ctrl+C终止程序,发现定向文件始终为空,即 ...

  2. javascript中的正則表達式

    对文本数据进行操作是JavaScript中常见的任务.正則表達式通过同意程序猿指定字符串匹配的模式来简化诸如验证表单中输入是否具有正确格式之类的任务. 1.正則表達式标记: 字符 含义 举例 i 大写 ...

  3. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

  4. winform MDI子窗口闪动问题

    在网上看到的 不知道什么原理但真的很实用 将下面的代码随便放到主窗体的任何一个地方 protected override CreateParams CreateParams         { get ...

  5. python（30）- 常用模块

    模块就是py文件.python中能开辟作用域的只有函数.类和模块. for循环不能开辟作用域,for循环内的变量为全局变量.if...else...同for循环一样. 一 time模块 时间表示形式 ...

  6. 二维数组，锯齿数组和集合 C# 一维数组、二维数组（矩形数组）、交错数组（锯齿数组）的使用 C# 数组、多维数组（矩形数组）、锯齿数组（交叉数组）

    二维数组,锯齿数组和集合 一.二维数组 二维数组:一维数组----豆角二维数组----表格 定义:1.一维数组:数据类型[] 数组变量名 = new 数据类型[数组长度];数据类型[] 数组变量名 = ...

  7. Hive学习 系列博客

    原 Hive作业优化 原 Hive学习六:HIVE日志分析(用户画像) 原 Hive学习五--日志案例分析 原 Hive学习三 原 Hive学习二 原 Hive学习一 博客来源,https://blo ...

  8. linux 进入 GNOME X 界面

    CentOS 安装Gnome CentOSVmwareLinuxBlogHTML  刚开始装系统的时候,没有选Gnome或者KDE,现在想装个玩玩. 简单的安装可以参考这个:http://huruxi ...

  9. spring boot 打包报错

    [ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.3.0.RELEASE:repac ...

  10. iOS开发--用户点击频繁，多个异步网络请求取消问题？

    一.业务环境描述 当一个view同时添加两个tableView为subView的时候,两个tableView分别为mainTable和subTable. 当用户点击mainTable上的某一条数据时, ...