背景

最近开启一个新项目，需要对前端的各类资源文件进行打包，经过多方调研后，决定使用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. Linux如何进行文件管理

    Linux中的所有数据都被保存在文件中,所有的文件被分配到不同的目录.目录是一种类似于树的结构,称为文件系统.当你使用Linux时,大部分时间都会和文件打交道,通过本节可以了解基本的文件操作,如创建文 ...

  2. UUID库

    If you cannot afford to use Boost, then there is a very minimal library that I implemented which sim ...

  3. 条件编译#if

    1.为什么需要条件编译 客户的需求在不停地发生变化,一会儿需要这个功能,一会儿不需要这个功能.我们可以使用条件编译来方便地裁剪功能. 2.条件编译语句#if 条件编译语句#if的形式是 #if exp ...

  4. GCD总结

    //用block只有两种:同步执行/异步执行(参数1:队列;参数二:任务) dispatch_async(dispatch_get_global_queue(0, 0),^{ });//异步在新的线程 ...

  5. 室内定位系列（二）——仿真获取RSS数据

    很多情况下大家都采用实际测量的数据进行定位算法的性能分析和验证,但是实际测量的工作量太大.数据不全面.灵活性较小,采用仿真的方法获取RSS数据是另一种可供选择的方式.本文介绍射线跟踪技术的基本原理,以 ...

  6. keras安装

    找对工具真的很重要,周末和学霸折腾了一天才装了几个包,问了同事找了一个方便的包,装起来不要太快啊.二十分钟全部搞定. 一.Anaconda 真是大杀器,牛到飞起来,一键部署,所有常用的机器学习包全部包 ...

  7. 图解TCP/IP→第2章基础知识

    ####TCP.IP背景**关键词:ARPANET,UNIX,分组交换技术,*ARPANET(阿帕网),也是全球互联网的鼻祖.阿帕网的成功也充分证明了基于分组交换技术的通信方法的可行性.*20世纪70 ...

  8. rcu机制

    转载自:再谈Linux内核中的RCU机制-MagicBoy2010-ChinaUnix博客 http://blog.chinaunix.net/uid-23769728-id-3080134.html ...

  9. GET和POST有什么区别？及为什么网上的多数答案都是错的

    如果有人问你,GET和POST,有什么区别?你会如何回答? 最普遍的答案 回来之后寻思了很久,他到底是想问我什么?我一直就觉得GET和POST没有什么除了语义之外的区别,自打我开始学习Web编程开始就 ...

  10. html div 添加链接

    <html> <body> <a href="http://www.w3school.com.cn/" target="_blank&quo ...