webpack是前端开发中比较常用的打包工具之一，另外还有gulp，grunt。之前没有涉及过打包这块，这里介绍一下使用webpack打包的流程。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

下面我们新建一个项目来详细描述一下使用webpack打包项目的过程：

1.安装好npm，这个不再复述，然后在一个目录下执行 npm init，这样就会初始化一个项目包，里面就有了一个package.json的文件，这个文件想必大家都有所了解

2.然后安装一下webpack，既然我们想打包，就要把webpack这个工具安装好，安装方式有两种，一个是全局安装一个是安装在项目中，在项目的package.json目录下执行的命令分别是npm install -g webpack 和 npm install --save-dev webpack，在这里我们安装在项目里面，使用第二种安装方式

3.安装完成之后我们能看到项目目录下有一个node_module的文件夹，然后我们就可以写自己的项目了，我们首先建立一个app和public的文件夹，在app中新建两个文件，分别是test.js和main.js，在pulic中新建一个index.html文件，这样我们的基本项目雏形就产生了

4.我们在index.html中写入一下片段：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Webpack Project</title>

  </head>

  <body>

    <div id='root'>

    </div>

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

  </body>

</html>

5.我们在test.js中写入这样一个除了方法：

//test.js

module.exports = function() {

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

  test.textContent = "Hi there and testing!";

  return test;

};

6.我们在main.js中把test.js的方法导入进来：

//main.js

var test= require('./test.js');

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

7.下面我们就可以使用webpack工具进行打包了，在项目的根目录，也就是包含node_module的目录下执行下面这个命令node_modules/.bin/webpack app/main.js public/bundle.js，这条命令的是使用webpack把打包后的文件命名为bundle.js放在public文件夹下，其中app/main,js是项目的入口。我们能看到终端上会打印出包含这样的log

8.这就说明我们的打包工作完成了，然后我们打开index.html文件就能看到我们输入的内容：Hi there and testing!

9.这样要配置项目入口，又要配置输出文件名之类的东西，在命令行输入比较麻烦，我们可以使用文件配置的方式，在项目的根目录中新建一个webpack.congfig.js的文件，把下面这些内容写入进去

module.exports = {

  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

这样我们就可以直接使用node_modules/.bin/webpack直接进行打包操作了

10.如果我们不想使用node_modules/.bin/webpack这样的命令，习惯使用npm xxx之类的，我们在我们的package.json中设置一下启动命令即可：

"scripts": {

    "webpack": "webpack" //配置的地方就是这里啦

  }

然后我们直接执行npm run webpack同样可以执行打包任务

11.接下来我们介绍，如何直接引入json类型的文件，这里我们使用loaders模块，先说一下应用场景吧。我们现在有一个json文件，我们想把它导入到模块中，然后读取里面的信息，下面我们的文件目录是这样的：

12.如果我们想在任意一个模块，如test.js或者main.js中导入这个json文件，比如，我们的test.json文件中有这样一个内容

//test.json

{

  "Test": "Hi there and geetings from JSON!"

}

我们想在test.js使用这样Test字段

var test = require('./test.json');

module.exports = function() {

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

  geet.textContent = test.greetText;

  return geet;

};

我们就要引入json-loader，具体的办法是：在根目录下执行

//安装可以装换JSON的loader

npm install --save-dev json-loader

然后把我们的webpack.config.js配置成下面这样

module.exports = {

  entry:  __dirname + "/app/main.js",

  output: {

    path: __dirname + "/public",

    filename: "bundle.js"

  },

  module: {//在配置文件里添加JSON loader

    loaders: [

      {

        test: /\.json$/,

        use: "json-loader"

      }

    ]

  }

}

最后我们执行一下npm run webpack，打包完成，打开index.html页面就会显示test.json里面的Hi there and geetings from JSON!这个内容

13.如果我们想把css样式也一起打包，就npm install --save-dev style-loader css-loader，然后在webpack.config.js进行相应的配置就行了，这样是把js和css打包成一个文件，也可以把他们分开打包。

如何使用webpack打包你的项目的更多相关文章

  1. webpack打包vue2.0项目时必现问题(转载）

    原文地址:http://www.imooc.com/article/17868 [Vue warn]: You are using the runtime-only build of Vue wher ...

  2. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  3. 使用webpack打包后的vue项目如何运行（express）

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错 ...

  4. 如何使用webpack打包项目

    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt.之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程. Grunt和Gulp的工作方式是:在一个配置文件中, ...

  5. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  6. 前端项目模块化的实践2：使用 Webpack 打包基础设施代码

    以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...

  7. 如何使用webpack打包前端项目

    webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...

  8. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  9. 【vue】饿了么项目-使用webpack打包项目

    1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的& ...

随机推荐

  1. JAVA中快速构建BEAN的方法

    首先,创建一个JAVA类,testBean.java. package com.beans; public class testBean { } 然后,添加私有成员字段. package com.be ...

  2. YaoLingJump开发者日志（九）V1.1.1版本完成

    跳跃吧瑶玲下载连接 百度网盘下载 介绍   Android版本升级到8.0,发现原来的图标不显示了:   百度了一下解决方案,用了该博客提供的第二种方法,修改roundIcon的内容.   可爱的图标 ...

  3. 使用WCF上传数据

    通过传递Stream对象来传递大数据文件,但是有一些限制: 1.只有 BasicHttpBinding.NetTcpBinding 和 NetNamedPipeBinding 支持传送流数据. 2. ...

  4. 【bzoj5064】B-number 数位dp

    题目描述 B数的定义:能被13整除且本身包含字符串"13"的数. 例如:130和2613是B数,但是143和2639不是B数. 你的任务是计算1到n之间有多少个数是B数. 输入 输 ...

  5. BZOJ4867 Ynoi2017舌尖上的由乃（dfs序+分块）

    容易想到用dfs序转化为序列上的问题.考虑分块,对每块排序,修改时对于整块打上标记,边界暴力重构排序数组,询问时二分答案,这样k=sqrt(nlogn)时取最优复杂度nsqrt(nlogn)logn, ...

  6. 【题解】Atcoder AGC#16 E-Poor Turkeys

    %拜!颜神怒A此题,像我这样的渣渣只能看看题解度日╭(╯^╰)╮在这里把两种做法都记录一下吧~ 题解做法:可以考虑单独的一只鸡 u 能否存活.首先我们将 u 加入到集合S.然后我们按照时间倒序往回推, ...

  7. [洛谷P4735]最大异或和

    题目大意:有一串初始长度为$n$的序列$a$,有两种操作: $A\;x:$在序列末尾加一个数$x$ $Q\;l\;r\;x:$找一个位置$p$,满足$l\leqslant p\leqslant r$, ...

  8. [2018集训队作业][UOJ450] 复读机 [DP+泰勒展开+单位根反演]

    题面 传送门 思路 本文中所有$m$是原题目中的$k$ 首先,这个一看就是$d=1,2,3$数据分治 d=1 不说了,很简单,$m^n$ d=2 先上个$dp$试试 设$dp[i][j]$表示前$i$ ...

  9. POJ2549：Sumsets——题解

    http://poj.org/problem?id=2549 题目大意:从集合中找到四个不相同的数,满足a+b+c=d,输出最大的d. —————————————————————————— 该式子变为 ...

  10. LOJ6368：请让本题永远沉睡于此——题解

    https://loj.ac/problem/6368 给一个分数,求对p=1e9+7取模的值. 给高一同学出的毒瘤模拟题,正好试试给loj传题,竟然过审了,虽然个人觉得很水,但是考试情况来看仅有一人 ...