用webpack打包模块

简介

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

  WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

实际操作（以下操作使用git bash）

1.安装webpack(该步建立在cnpm包管理器已经安装的情况下)

    方法a：全局安装webpack
    全局安装webpack请使用命令:     cnpm install -g webpack    ，安装后会出现提示信息，若不确定已经安装，可以通过命令    webpack –v    ，若出现版本提示说明已经安装成功。

    方法b:局部安装webpack（切换到项目目录）
    局部安装不需要创建package.json文件，该文件自动生成。局部安装请在项目目录执行    cnpm install --save-dev webpack   。

2.生成package.json文件

     package.json文件用于查看安装的包，同时又可以根据该配置文件下载安装包。package.json文件可以手动创建也可以通过命令生成。在项目目录，通过命令    npm init     自动生成，途中一路enter直到出现提下面提示，按yes就会保存该配置文件，得到的配置文件是默认的。

3.通过webpack工具打包文件

我的工作目录包含两个文件，model.js和main.js,目录结构如下图。


  
  

   
   
  
  
我们可以通过两种方式来打包文件，具体如下。

    a.通过全局方式打包，请确认全局已经安装webpack
        在项目目录输入命令   webpack app/main.js public/bundle.js   ,即可打包需要打包的文件。打包完成会出现如下提示。



  
  

   
   
  
  
     命令：webpack {entry file} {destination}
     Entry file是可以通过该文件找到所有依赖的文件的文件。
     destination是文件打包的目的，即你想将文件打包到什么地方。

    b.通过局部打包的方式打包文件
        在项目目录通过命令node_modules/.bin/webpack app/main.js public/bundle.js即可执行打包任务，此时和全局的区别是，需要指定webpack局部安装的位置。

    c.通过配置文件打包打包文件
        在项目目录，创建新的文件webpack.config.js，并作相关配置，配置如下。

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

         配置好该文件后，在全局安装的前提下，在项目目录通过 webpack即可完成打包工作，提示信息与上相似。在局部安装的前提下可以通过命令node_modules/.bin/webpack来执行打包工作。

    d.更快捷的打包方式
        npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可，设置方法如下。

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.9"
  }
}

        npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build。