• Webpack

    什么是webpack：现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：1、模块化，2、css预处理器等，通过这些改进大大提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

  • 安装webpack：

  1. 可以使用npm安装。

  2. 在终端中转到该文件夹后执行下述指令就可以完成安装。（cmd）

    npm install -g webpack//全局安装

    //安装到你的项目目录

    npm install --save-dev webpack

  • 使用webpack

  1. 先在本地新建一个空的文件夹（此处命名为webpack）;

  2. 在上述文件夹下创建package.json文件，可以使用npm init命令自动创建 这个package.json文件

     	npm init

    执行完这个命令后回车默认。

  3. 文件夹的目录如下

            ——app
    
        ——node_modules
    
        ——public
    
        ——package.json
    
        ——webpack.config.js

 index.html放在public文件夹下；
    
 main.js 放在app文件夹下。

  4. package.json文件就绪，我们在继续安装Webpack作为依赖包，输入：

     	npm install --save-dev webpack

执行webpack -v 看是否安装好了webpack，

5. 相关模块里的测试代码

		<!-- index.html -->

		<!DOCTYPE html>

		<html lang="en">

		  <head>

		    <meta charset="utf-8">

		    <title>Webpack Test</title>

		  </head>

		  <body>

		    <div id='root'>

		    </div>

		    <script src="bundle.js"></script>

		  </body>

		</html>

		// main.js

	    var greet = document.createElement('div');

	    greet.innerHTML = "Hello World!";

	    document.querySelector("#root").appendChild(greet);

  1. 在终端使用webpack（在命令行运行下面语句）

     	# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
    
 	# {destination for bundled file}处填写打包文件的存放路径
    
 	# 填写路径的时候不用添加{}
    
 	webpack {entry file} {destination for bundled file}

 	# webpack非全局安装的情况
    
 	node_modules/.bin/webpack app/main.js public/bundle.js
    
 查看效果打开index.html文件即可。

  2. 通过配置文件来使用webpack

    在刚才的文件夹的根目录下建立一个webpack.config.js文件，代码如下

     	module.exports = {
    
 	  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    
 	  output: {
    
 	    path: __dirname + "/public",//打包后的文件存放的地方
    
 	    filename: "bundle.js"//打包后输出文件的文件名
    
 	  }
    
 	}

在终端运行webpack即可(非全局安装需使用node_modules/.bin/webpack)。webpack的配置文件最基本的就是入口及输出口的配置。

  1. 更快捷的执行打包任务

    在package.json文件的script属性的start键的值写为“ webpack”，我们以后便可在终端直接执行

     	npm start
  • 总结

    以上，便实现了一个简单的webpack打包，webpack更强大的功能如source map 使调试更加容易、构建本地webpack服务器、loaders、babel等，请具体查看一位大牛的文章：http://www.jianshu.com/p/42e11515c10f

安装及使用webpack的更多相关文章

  1. 安装node/npm/webpack步骤

    nodejs软件的下载地址:https://nodejs.org/en/ 1.只要安装好了nodejs,就自动安装好了npm包. 2.在cmd中通过命令node -version查看是否安装好node ...

  2. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  3. webpack4.0.1安装问题和webpack.config.js的配置变化

    The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webp ...

  4. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  5. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  6. 03慕课网《vue.js2.5入门》——Vue-cli的安装，创建webpack模板项目

    安装Vue-cli 第一种 貌似不可以,然后用了第二种,但是重装系统后,第二种不能用了,用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创 ...

  7. 安装，配置webpack.

    1.下载node.js 2.在需要用到webpack的项目下打开命令窗口运行npm init生成package.js 3.安装webpack,使用npm install webpack --save- ...

  8. vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)

    1.环境搭建 1.1.安装node.js 1.2 安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号 ...

  9. windows环境安装vue-cli及webpack并创建vueJs项目

    1. 安装node.js 2. 如果安装的是旧版本的 npm,可以通过 npm 命令来进行版本升级,命令如下: npm install npm -g npm网站服务器位于国外,所以经常下载缓慢或出现异 ...

随机推荐

  1. win8内置管理员账号既能使用metro应用又能使用默认共享

    一.内置管理员账号打开METRO应用 1.按WIN+R 弹出运行框. 2.输入gpedit.msc点确定,打开本地组策略编辑器. 3.逐级选择“计算机配置”,“Windows 设置”,“安全设置”,“ ...

  2. app开发公司排名哪家强？看App Annie给出的答案

    app开发公司排名哪家强?这个答案不好定义,我们从第三方权威平台数据来看吧.App Annie在<全球移动应用市场2016年回顾>报告中从全球每月活跃用户数.全球下载量.全球收入等几个维度 ...

  3. boost之内存池

    讲到内存池我们会想到对对象进行动态分配的过程new包含三个过程 1.使用operator new分配内存 2.使用placement new 初始化 3.返回内存地址. 分配内存可以分解成分配内存和获 ...

  4. 在运行myeclipse10注册机时，显示找不到com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel这个包

    在win7下安装MyEclipse10.安装完成之后运行注册机,总是提示classnotfond显示找不到com.sun.java.swing.plaf.nimbus.NimbusLookAndFee ...

  5. first application

    <!DOCTYPE html> <html> <head> <title>Create a Map</title> <meta htt ...

  6. hadoop04---shell

    Linux上的mysql安装之后卸载是卸载不干净的,ping服务器ping不通就是把icmp协议关闭了,ping使用的是icmp协议. Export是全局变量,所有用户登录进来都可以使用. 1.ipt ...

  7. $.cssHooks 扩展 jquery 的属性操作

    最近在研究 $.transit 然后发现了 $.cssHooks 这个方法,试了一下官方的 demo 表示好像并不是那么回事,所以决定深入的测试一下. $.cssHooks 的作用在于拓展属性(自己意 ...

  8. 递归实现N皇后问题

    其实是看到一位名为“活在二次元的伪触”的博主昨天还是前天写了篇这个题材的笔记,觉得有点意思,于是想自己来写写. 其实我发现上述那位同学写N皇后问题写得还不错,文末也会给出这位同学用通过递归的方法实现N ...

  9. 3.6《深入理解计算机系统》笔记（四）虚拟存储器，malloc，垃圾回收【插图】

    概述 ●我们电脑上运行的程序都是使用虚拟存储,跟物理内存根本不搭边. ●既然虚拟内存是在磁盘上的,为什么它又运行这么好,并没有感觉卡顿?这要感谢程序的局部性! ●虚拟存储器的调度是一个操作系统必须做好 ...

  10. Android系统--输入系统（一）必备的Linux知识_inotify和epoll

    Android系统--输入系统(一)必备的Linux知识_inotify和epoll 引入 1. 笔记本电脑插入外接键盘,两个键盘都可以使用 a. 键盘即插即用--如何检测键盘的接入和拔出 hotpl ...