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. JS 书籍拓展内容

    一.面向对象

  2. ci tp重定向

    server { listen 80; #listen [::]:80; server_name tpblog.yeves.com; index index.html index.htm index. ...

  3. 第四章 持续集成jenkins工具使用之项目配置

    1.1   创建项目 点击“新建”,输入项目名称,选择“构建一个自由风格的软件项目”,点击ok,项目创建完成. 1.2   配置项目 点击步骤1创建的项目,进入项目页面,如图: 点击“配置”,进入配置 ...

  4. Jmeter系列-自动生成html报告

    从JMeter 3.0开始已支持自动生成动态报告,我们可以更容易根据生成的报告来完成我们的性能测试报告. 如何生成html测试报告 如果未生成结果文件(.jtl),可运行如下命令生成报告: jmete ...

  5. 在a标签的href用户#name 的可以实现页面 上下跳转

  6. Runtime之字典转模型实战

    Runtime之字典转模型实战 先来看看怎么使用Runtime给模型类赋值 iOS开发中的Runtime可谓是功能强大,同时Runtime使用起来也是非常灵活的,今天博客的内容主要就是使用到一丁点的R ...

  7. 【题解】Atcoder ARC#90 E-Avoiding Collision

    自己做出来固然开心,但是越发感觉到自己写题的确是很慢很慢了……往往有很多的细节反反复复的考虑才能确定,还要加油呀~ 这道题目的突破口在于正难则反.直接求有多少不相交的不好求,我们转而求出所有相交的.我 ...

  8. [洛谷P5048][Ynoi2019模拟赛]Yuno loves sqrt technology III

    题目大意:有$n(n\leqslant5\times10^5)$个数,$m(m\leqslant5\times10^5)$个询问,每个询问问区间$[l,r]$中众数的出现次数 题解:分块,设块大小为$ ...

  9. BZOJ1486：[HNOI2009]最小圈——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1486 https://www.luogu.org/problemnew/show/P3199 题面 ...

  10. UVA.136 Ugly Numbers (优先队列)

    UVA.136 Ugly Numbers (优先队列) 题意分析 如果一个数字是2,3,5的倍数,那么他就叫做丑数,规定1也是丑数,现在求解第1500个丑数是多少. 既然某数字2,3,5倍均是丑数,且 ...