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. 【vue】饿了么项目-使用webpack打包项目

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

  2. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  3. 纯webpack打包项目

    webpack 3 零基础入门教程 http://webpackbook.rails365.net/466996(文本) https://www.rails365.net/movies/webpack ...

  4. 实践2：github管理代码仓库，包含用webpack打包项目

    此篇介绍用github仓库管理代码,github是大型的项目代码管理,存储平台:简单说帮助一个团队共享,修改同一个项目,配合着gitHub Desktop非常方便: 可以做到多人删除.修改.增加同一项 ...

  5. 0基础手把手教你搭建webpack运行打包项目（未完待续）

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  6. 如何使用webpack打包你的项目

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

  7. 零基础学习webpack打包管理

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  8. webpack打包生成多个vendor的配置方法

    用webpack打包项目的时候,一般喜欢把一些公用的库打包的vendor.js里面,比如像react,react-router,redux等. 随着引入的库越来越多,vendor文件也变得越来越大,于 ...

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

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

随机推荐

  1. replicatedhq-ship 基于Kustomize 项目的快速kubernetes 应用部署工具

    replicatedhq-ship 是对Kustomize 项目的扩展,我们可以用它来快速的进行三方应用的管理部署, 可以和helm,kubernetes 清单文件,knative 集成,我们可以方便 ...

  2. Autofac学习之三种生命周期：InstancePerLifetimeScope、SingleInstance、InstancePerDependency 【转载】

    InstancePerLifetimeScope:同一个Lifetime生成的对象是同一个实例 SingleInstance:单例模式,每次调用,都会使用同一个实例化的对象:每次都用同一个对象: In ...

  3. TypeScript 之 函数

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Functions.html 为函数定义类型 为函数添加类型: fu ...

  4. java 泛型实现原理

    泛型思想最早在C++语言的模板(Templates)中产生,Java后来也借用了这种思想.虽然思想一致,但是他们存在着本质性的不同. C++中的模板是真正意义上的泛型,在编译时就将不同模板类型参数编译 ...

  5. split与re.split/捕获分组和非捕获分组/startswith和endswith和fnmatch/finditer 笔记

    split()对字符串进行划分: >>> a = 'a b c d' >>> a.split(' ') ['a', 'b', 'c', 'd'] 复杂一些可以使用r ...

  6. redis sentinel哨兵的使用

    哨兵模式是Redis集群管理的一种方式. 下面以Go语言为例介绍其使用方式. 使用举例 package main import ( "fmt" "strings" ...

  7. 响应json去除参数值为空的参数-springboot配置

    1.添加jackson相关依赖 <!--jackson 开始--><dependency> <groupId>com.fasterxml.jackson.core& ...

  8. 【java】标示符

    java的标示符由数字0-9,字母a-zA-Z,_$组成.(java是严格区分大小写的) 标示符的规则: 1.不能以数字开头 2.不能使用关键字 一般的命名规则: 包名:多个单词组成时,所有字母全部小 ...

  9. 第一个NIOS II工程using Qsys-------Let Qsys Say Hello

    1.新建工程 2.添加原理图文件 注:似乎Nios II工程都需要涉及到原理图编程. 3.进入Qsys进行内核设计 注:启动Qsys后,系统已经为内核默认添加了一个组件clk_0. 4.设置时钟名字和 ...

  10. [转]Eclipse快捷键 10个最有用的快捷键

    Eclipse快捷键 10个最有用的快捷键 5 4 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的 ...