使用npm和webpack构建工作环境

之前说到我想要用ES6的import来导入模块，但是想要使用ES6的话就需要对代码进行转码，这就关系到工作环境的搭建了。

以前的工作没有工作环境的说法，用的都是很传统的东西，require，jq，bootstrap之类的，都是做简单引入，没有转码压缩打包之类的步骤。这次学习构建工作环境，将是我脱离老一套，跟上时代的第一步。

说回正题，工作环境是什么？在项目的构建中，我们往往会接触到很多压缩转码打包的事情，如果把这些工具都算到项目里面去，那项目肯定是相当大的。我们希望这些工具和繁琐的过程都在项目构建的时候完成，用户使用的是我们已经打包转码好的文件，这个时候node就能出场了，通过node，我们可以方便地使用npm加载项目所需要的库和加载器，然后通过webpack进行转码和打包，最终输出目标文件给用户，下面简单介绍一下环境的搭建。

首先是npm，作为node的包管理工具，仅需一行指令就能很方便地加载各种库和工具，这是我的配置文件package.json：

{
  "name": "wimenlodemo",
  "version": "1.0.0",
  "description": "my first SPA demo",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "spa",
    "vue",
    "webpack"
  ],
  "author": "wimenlo",
  "license": "MIT",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^12.0.3",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^2.5.1"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.5.3"
  }
}

这个文件会在输入指令:npm install 后启用（如果当前没有package.json文件的话则要使用：npm init 自行创建）。具体内容是什么意思网上各种教程已经很清楚了，不再累赘，这里要注意一个地方：devDependencies是指在开发环境中使用的工具，在npm中手动加载的时候需要加上 --save-dev 参数，这些工具并不会加入到用最终的户文件中。而dependencies则是项目的依赖文件，用户使用项目的时候需要用到，所以会打包进最终的用户文件中，在npm中手动加载的时候要加上 --save 参数。

加载完成后，在项目的根目录中就会多出一个 node_modules 的文件夹，里面就是我们需要用到的工具了。

需要的工具已经准备好了，那么要怎么使用呢？我的目标是把ES6转成浏览器能读懂的ES5，那么就需要用到babel(上面已经加载进来了)，这时候就需要用到webpack了。这是我的webpack配置文件 webpack.config.js：

var path=require("path");//path是node提供的一个对象，用来处理文件路径
module.exports={//CommonJS的模块定义写法
    entry:'./src/main.js',//定义入口，webpack以这个文件为基础去判断依赖和加载（可以有多个）
    output:{//定义输出
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'index.js',//输出文件的名称
        publicPath:'/dist'//虚拟路径，在html引入文件时使用的路径
    },
    module:{
        rules:[//加载规则（以前是loader）
            {
                test:/\.js$/,//获取特定尾缀文件
                loader:'babel-loader',//定义加载器
                exclude: /node_modules///exclude表示该路径内容不需加载，include则表示需要加载
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    }
};

这个需要好好地理解一下，所以我把注释都写上去了。在写好配置文件之后，我们就可以开始使用ES6的语法编写项目，之后在node中运行webpack，就可以在dist文件中中发现新建的index.js了，到现在为止，一个简单的环境搭建和实际应用就完成了。