webpack安装

1.安装之前你必须要安装node.js，如果你没安装可以在node.js网去下载node.js

2.全局安装webpack,打开cmd输入npm install webpack -g

3.cmd cd进入当前目录，输入npm init命令，一直按Enter,然后在当前文件夹会出现package.json文件

当前目录为webpackTest

webpack就安装成功了

webpack的配置

1.创建项目文件夹，文件夹的名字，不要叫“webpack”,并且不要包含大写字母，路径名不要包含中文

2.在当前目录下新建webpack.config.js配置文件，名字一定要是这个，不然会出错。因为这是webpack默认执行的文件

当前文件还有如下文件

out文件夹：存放出口文件

src文件夹

3.webpack.config.js配置文件的参数.

    • entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
    • output：对应输出项配置 
      • path ：入口文件最终要输出到哪里，
      • filename：输出文件的名称
      • publicPath：公共资源路径

4.在src文件夹下的js文件夹下创建入口文件，我创建的是名为entry的js文件，在项目的根目录下新建index.html文件来试调使用；

webpack.config.js

module.exports = {

    entry : './src/js/entry.js',//入口文件

    output : {//输出文件

        filename : 'index.js',//输出文件名

        path : __dirname + '/out'//输出文件路径

    },

}

entery.js

console.log('webpack');

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>ss</title>

</head>

<body>

    <script src="./out/index.js"></script>

    <!-- 注意在这里引入的是打包完成的js文件 -->

</body>

</html>

cmd cd 进入当前项目的根目录，即webpackTest文件夹下；输入webpack或者webpack-w命令，查看html文件是否能console.log出"webpack"字符串

webpack和webpack-w的区别

webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)

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

  1. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  2. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  3. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  4. webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）

    跟着Webpack傻瓜式指南(一)这个教程在安装webpack和webpack-dev-server的时候遇到很多问题,查了很多终于一一找到解决办法. 主要参考了这三篇博文: moudule.js:3 ...

  5. webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学react ...

  6. webpack和webpack-dev-server安装配置

    本文转载自:https://www.cnblogs.com/xuehaoyue/p/6410095.html 跟着Webpack傻瓜式指南(一)这个教程在安装webpack和webpack-dev-s ...

  7. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  8. webpack安装大于4.x版本(没有配置webpack.config.js)

    webpack安装大于4.x版本(没有配置webpack.config.js) webpack 输出参数-o 高版本  如果安装的webpack版本大于4+,还需要安装webpack-cli.在没有配 ...

  9. webpack安装低于4版本(没有配置webpack.config.js)

    webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本  1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...

随机推荐

  1. 【JavaEE】企业面试问题-Java基础

    1. Java基础部分   1.1 Java中的方法覆盖(Overwrite)和方法重载(Overloading)是什么意思? 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的 ...

  2. mysql启动时报错：Starting MySQL... ERROR! The server quit without updating PID file (/opt/mysql/data/mysql.pid) 的解决方法

    出现问题的可能性 1.可能是/opt/mysql/data/数据目录mysql用户没有权限(修改数据目录的权限) 解决方法 :给予权限,执行  "chown -R mysql.mysql / ...

  3. html5页面实现点击复制功能

    在实际工作中,有时候会遇到这样的需求,页面上有一个链接,不需要选中链接内容,只需要点击复制按钮,就可以把链接内容复制到剪切板.这时候可以使用clipboard插件来实现.以下是一个简单的demo. 首 ...

  4. .Net高级进阶，在复杂的业务逻辑下，如何以最简练的代码，最直观的编写事务代码？

    本文将通过场景例子演示,来通俗易懂的讲解在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码. 通过一系列优化最终达到两个效果,1.通过代码块来控制事务(分布式事务),2.通过委托优化Tran ...

  5. ldap数据库--ODSEE--复制协议

    简单介绍一下ODSEE的复制拓扑的建立,复制协议可以通过管理界面进行创建,也可以通过命令行创建.在此之前需要了解一些复制协议的相关概念,这里针对OESEE. 1,复制角色 master(提供者,也可以 ...

  6. VMware系统克隆

    第1章 搭建VMware实战环境 1.1 vmware主机配置-网络配置 1.1.1 虚拟主机添加网卡信息(5) a.右键虚拟主机→设置→添加虚拟网卡硬件设备 b.设置网络适配器类型→完成添加 1.1 ...

  7. 配置ssh免密码登陆

      以root账户为例 准备两台以上的Linux服务器,我这里用的是s204,s205两台机器,多台同样的 先使用ssh登录试一下,如果没有安装则需要先安装一下 ssh s205会提示你输入密码 原理 ...

  8. VPN连接机器不再输入密码以及Pin码方法

    连接机器不输入密码 #!/usr/bin/env expect   spawn ssh guosong@xx_ip; expect "*password*"; send  &quo ...

  9. mybatis中sql语句的批量插入

    <!-- 收件箱插入收件信息 -->    <insert id="insertReceiveemail">           <!-- 生成一条U ...

  10. Python：多线程编程

    1.IO编程 IO(input/output).凡是用到数据交换的地方,都会涉及io编程,例如磁盘,网络的数据传输.在IO编程中,stream(流)是一种重要的概念,分为输入流(input strea ...