webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

webpack安装

1.webpack基于node.js环境安装，可以去Node.js官网下载，使用node -v检查是否安装成功。

2.使用npm安装webpack，通过全局先将webpack指令安装进电脑中

npm install webpack -g

3.cmd（终端） cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令

npm init

接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件。

这样webpack就安装完成了。

webpack配置

1.创建项目文件夹， 名字自起， 但路径名不要包含中文， 以及项目名也不要叫”webpack”，并且不要包含大写字母。

2.接下来创建并编写配置文件。首先我们先介绍几个配置文件的参数：

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

在你的项目目录下创建webpack.config.js配置文件，通过这个文件进行webpack的配置，并且还要创建一些路径保存基本文件。

更目录创建静态资源文件夹src，src目录下创建js，img，css，sass等文件夹纺织静态文件。

在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件：

 //webpack.config.js

 module.exports = {

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

     output : {//输出文件

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

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

     },

 }

我们随便在index.html和入口文件entry.js写点什么看看是否成功配置。

 //index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>ss</title>

 </head>

 <body>

 111

     <script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件

 </body>

 </html>
 //entry.js

 console.log('1234');

cmd打开终端 cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, 查看index.html是否成功console出1234

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

打包一些基本的js文件操作，下一篇文章介绍loader打包非js文件和一些配置。

webpack_配置和使用教程的更多相关文章

  1. 【转载】PHP.INI配置:Session配置详细说明教程

    网上有很多PHP.INI文件配置的中文说明,但是对于PHP初学者来说在进行PHP运行环境搭建配置时还是容易一头雾水,今天换一种角度来分享如何进行php.ini配置,以求达到解决实际问题的效果,开篇以P ...

  2. 迅美VPS安装和配置MySQL数据库教程

    MySQL相关教程与知识:    迅美VPS安装和配置MySQL数据库教程    navicat8管理MySQL教程-创建数据库和导入数据    navicat8管理MySQL教程-管理建立用户和分配 ...

  3. 原创教程：SpagoBI4.2汉化及配置Mysql数据库教程

    SpagoBI4.2汉化及配置Mysql数据库教程 商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的B ...

  4. less，sass，stylus配置和应用教程及三者比较

    less,sass,stylus配置和应用教程及三者比较  Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运 ...

  5. [php基础]PHP.INI配置:Session配置详细说明教程

    网上有很多PHP.INI文件配置的中文说明,但是对于PHP初学者来说在进行PHP运行环境搭建配置时还是容易一头雾水,今天换一种角度来分享如何进行php.ini配置,以求达到解决实际问题的效果,开篇以P ...

  6. Genymotion配置及使用教程（最新最完整版附各部分下载地址）

    Genymotion配置及使用教程(最新最完整版附各部分下载地址) FROM:http://blog.csdn.net/beiminglei/article/details/13776013 早都听说 ...

  7. Tomcat服务器下载、安装、配置环境变量教程(超详细)

    请先配置安装好Java的环境,若没有安装,请参照我以下的步骤进行安装! 请先配置安装好Java的环境,若没有安装,请参照我以下的步骤进行安装! 请先配置安装好Java的环境,若没有安装,请参照我以下上 ...

  8. Centos 6.5使用vsftpd配置FTP服务器教程

    Centos 6.5使用vsftpd配置FTP服务器教程什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用.vsftpd 的名字代表”ver ...

  9. windows Sever 2012下Oracle 12c安装配置方法图文教程

    windows Sever 2012下Oracle 12c安装配置方法图文教程 Oracle 12c安装配置方法图文教程,具体内容如下 1.我们开启虚拟机 2.Windows Sever 2012启动 ...

随机推荐

  1. MONyog-数据库性能监控工具

    一.安装步骤 较为简单,网上可以搜索到,此处不做详细说明. 二.使用图解 此处介绍监控数据库连接量.并发量.吞吐量.响应时间等功能 1.设置连接需要监控的数据库 打开:http://127.0.0.1 ...

  2. 利用 Pandoc 将 Markdown 生成 Word/PDF 文件

    Pandoc 是一个格式转化工具,可以用于各(luan)种(qi)各(ba)样(zao)的文件转换, 反正我是认不全官网上的那个图(傲娇脸), 之前一直使用它将 Markdown 文件转换成 Html ...

  3. Spring编程式事务管理及声明式事务管理

    本文将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. Spring 事务属性分析 事务管理 ...

  4. 【Python】PYTHON中STRIP()方法学习笔记

    Python strip() 方法用于移除字符串头尾指定的字符(默认为空格). 当使用strip('xxx'),只要字符串头尾有"xxx"中的一个,就会去掉,而不是符合字符串''x ...

  5. IOI 98 (POJ 1179)Polygon(区间DP)

    很容易想到枚举第一步切掉的边,然后再计算能够产生的最大值. 联想到区间DP,令dp[i][l][r]为第一步切掉第i条边后从第i个顶点起区间[l,r]能够生成的最大值是多少. 但是状态不好转移,因为操 ...

  6. 【bzoj3631】[JLOI2014]松鼠的新家 LCA+差分数组

    题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在“树”上.松鼠想邀请小熊维尼前来 ...

  7. 【bzoj2588】Spoj 10628. Count on a tree 离散化+主席树

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  8. CentOS 用户管理useradd、usermod等

    1.创建新用户useradd,默认的用户家目录会被存放在/home 目录中,默认的 Shell 解释器为/bin/bash,而且默认会创建一个与该用户同名的基本用户组. 主要参数: -d 指定用户的家 ...

  9. [SP8372-TSUM]Triple Sums

    题面在这里 description 某\(B\)姓\(OJ\)权限题 给出\(n\)个正整数\(a[i]\),求\(i<j<k\)且\(S=a[i]+a[j]+a[k]\)的三元组\((i ...

  10. bzoj 2424: [HAOI2010]订货 （费用流）

    直接费用流,天数就是点数 type arr=record toward,next,cap,cost:longint; end; const maxm=; maxn=; mm=<<; var ...