背景

最近开启一个新项目，需要对前端的各类资源文件进行打包，经过多方调研后，决定使用webpack工具。但是网上的教程多是将webpack直接作为服务器使用，而我只是想将其作为单纯的资源打包工具而已。经过多方调研，终于发现如何实现webpack的文件打包功能。

准备

在使用webpack之前，必须先要安装nodejs和npm。

安装完npm后，由于npm国内访问非常慢，可以设置为从淘宝的镜像下载各种资源包。

npm config set registry http://registry.cnpmjs.org

新建工程目录

安装Webpack前，需要把命令行指向目录，具体怎么跳转就不多少了，下行命令中的ReactSrc就是工程目录。

cd  目录/ReactSrc

然后进行初始化，执行下列命令后会在工程目录下生成一个package.json文件。

npm init

引入webpack工具包

这时候就可以安装Webpack包了，下面命令是将webpack安装到nodejs的全局包下。

//全局安装

npm install -g webpack

执行下面的命令，将webpack作为本次工程的依赖包。

npm install --save-dev webpack

生成资源文件

在ReactSrc文件夹下生成两个文件夹，app和public。

app用来放js及数据等资源文件。

public用来放供用户访问的html文件。

这样，在ReactSrc下的目录结构如下：

在app下生成Greeter.js和main.js。

Greeter.js ，用来创建一个div，并在div中显示欢迎的内容。

module.exports = function() {

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

  greet.textContent = "Hi there and greetings!";

  return greet;

};

main.js，工程的主入口文件。

var greeter = require('./Greeter.js');

document.getElementById('root').appendChild(greeter());

在public下生成一个index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Webpack Sample Project</title>

  </head>

  <body>

    <div id='root'>

    </div>

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

  </body>

</html>

这时候会发现，在index.html中，引用了一个bundle.js，但是我们在app中并没有看到这个js啊。

不用担心，如何生成bundle.js就是我们这节的重头戏【用webpack打包并生成js文件】！

webpack打包配置

其实很简单，在导入webpack依赖包时，有一个webpack.config.js，打开后写入一下内容:

var config = {

   entry: './app/main.js', // 入口文件

   output: {

      path:'./public',

      filename: 'bundle.js', // 生成的结果文件

   },

   module: {

      loaders: [ {

         test: /\.jsx?$/,

         exclude: /node_modules/,

         loader: 'babel',

         query: {

            presets: ['es2015', 'react']

         }

      }]

   }

}

module.exports = config;

在这个文件中，我们可以看到webpack的打包配置，意思就是读取app目录下的main.js文件，在public文件夹下生成bundle.js文件。

配置完后，我们再打开初始化工程(npm init)时，生成的package.json文件。

在这个文件中，我们会看到其中有执行webpack打包命令。

{

  "name": "reactapp",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "webpack" // 执行webpack 打包命令

  },

  "author": "linh",

  "license": "ISC",

  "dependencies": {

    "react": "^15.3.1",

    "react-dom": "^15.3.1"

  },

  "devDependencies": {

    "webpack": "^1.13.2",

    "webpack-dev-server": "^1.16.1"

  }

}

开始打包

现在万事俱备，只欠东风了。打开命令行，执行如下命令，npm就会自动调用webpack，对工程中的js文件进行打包生成。

npm start

这时，打开public目录，会发现目录下多了一个bundle.js。直接在浏览器中打开该目录下的index.html，显示如下。

【JavaScript】 Webpack安装及文件打包的更多相关文章

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

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

  2. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  3. Webpack - 把json文件打包进js文件

    把html文件打包进index.js   1  新建文件 typings.d.ts    declare module "*.html" {   const content: st ...

  4. webpack的多文件打包问题

    1.第三方库如vue,vue-router可以利用webpack中的entry指定vendor:['vue','vue-router']来打包在一个文件中 2.将这些文件单独提取出来,在页面中使用&l ...

  5. webpack 几个基本打包扩展项的安装命令

    网速比较慢的童鞋,装包时请准备好花生瓜子 webpack 本身只能打包 JavaScript 模块,但是它可以通过拓展打包比如静态资源文件.less.sass.typescript 等,还可以通过 b ...

  6. webpackt入门1：webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  7. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

  8. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  9. webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

随机推荐

  1. Anaconda 安装 ml_metrics package

    ml_metrics is the Python implementation of Metrics implementations a library of various supervised m ...

  2. HP 820 G2变色龙安装10.11.6基本完美

    初始状态: 一块ssd硬盘,MBR格式分区,安装了WIN7 64位. 不想动win系统,因此就安装在硬盘的扩展分区 电脑配置: cpu: i7-5600u 声卡: ALC280 显卡: HD55 ...

  3. decimal与double，float的选择与区别

    decimal 类型可以精确地表示非常大或非常精确的小数.大至 1028(正或负)以及有效位数多达 28 位的数字可以作为 decimal类型存储而不失其精确性.该类型对于必须避免舍入错误的应用程序( ...

  4. js图片延迟加载

    什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...

  5. 用R去做文本处理

    数据说明 这是一份爬好的数据,data.frame格式.包括一些招聘信息,具体的列名和含义如下所示: 职位名称(occ_name)清洗 预览 清洗策略 需要去除无关的信息,比如符号以及数字信息 实现 ...

  6. qq空间等闪动的文字怎么做？

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. acm的ubuntu (ubuntu16.04 安装指南,chrome安装,vim配置,git设置和github,装QQ)

    日常手贱把ubuntu14.04更新到了16.04,然后就game over了.mdzz,不然泥萌也看不到这篇博客了=.= 然后花了些时间重装了一个16.04版的,原来那个14.04的用可以用,就是动 ...

  8. Autoit中用PrintWindow替代ScreenCapture函数实现截图

    想截取躲在后面的窗体或控件,找到了PrintWindow函数,幸运的是Autoit3也对此进行了封装以方便使用. 于是乎,将帮助文件里的_WinAPI_PrintWindow()实例改写了一下,以替代 ...

  9. 项目vue2.0仿外卖APP（六）

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  10. C++编译期间字节序判断

    当前常用的字节序一般就两种,大端序和小端序. 下面列出四种字节序的表达方式.在对应平台下,内存布局为{0x,00,0x01,0x02,0x03}的四字节,表示为十六进制的值就如下面代码所示的. END ...