前端开发环境搭建 node+webpack+babel+js压缩

记录前端继承开发环境的配置步骤，使用到npm + node + webpack + babel + js压缩工具，完成前端项目创建+插件下载+模块化开发+压缩打包测试。

1 安装node+npm

可以直接去node官网下载node然后安装，网上有很多教程所以不再介绍，这篇文字主要写开发环境的配置
安装完成后输入

node -v
npm -v

查看版本号确认是否安装成功
此外因为npm镜像是在国外，所以使用默认下载的话可能速度非常慢，我们可以修改镜像链接

npm config set registry "http://registry.npm.taobao.org" 
npm config list  //可以查看配置

新建一个测试文件夹，进入，shift+鼠标右键（windows环境）打开命令行窗口，输入npm init初始化，发现新增了一个package.json文件，这个就是我们项目的配置文件。npm会根据其中的配置管理依赖项。
随后执行npm install安装依赖，目录中多了一个 node_modules 文件夹，里面是一些初始的依赖，需要注意的是如果我们使用的IDE是 WebStrom 的话需要右键该文件夹然后 标记目录为->排除 ，不然打开项目时IDE会去检索该文件夹，可能造成卡死的状态。

2 安装webpack，babel-core，babel-preset-es2015，babel-loader

下一步可以在命令行键入

npm install --save-dev webpack babel-core babel-preset-es2015 babel-loader

去安装webpack和babel系列，babel每个插件的区别可以在网上查到
随后我们可以发现package.json同步更新了

3 配置webpack

最后我们就可以配置webpack来完成开发环境的搭建，新建webpack.config.js文件，按照自己的项目修改下面的内容即可。

/**
 * webpack.config.js
 **/

//使用path定位绝对路径
var path = require('path');
var webpack = require('webpack');

module.exports = {
    //修改上下文，之后entry就可以写相对路径
    context: path.resolve(__dirname, './js'),
    // 当entry是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。
    // webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面
    entry: [
        //'webpack/hot/only-dev-server',
        './main.js'
    ],
    // 当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    // 关于模块的加载相关，我们就定义在module.loaders中。
    // 这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。
    // 比如说给less文件定义串联的三个加载器（！用来定义级联关系）
    // 此外，还可以添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器：
    // { test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            //或者在根目录下新建.babelrc文件输入
            // {
            //   "presets": ["es2015"]
            // }
            query: {
                presets: ["es2015"]
            }
        }
            //{ test: /\.css$/, loader: "style!css" },
            //{ test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
        ]
    },
    // webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀
    // 然后我们想要加载一个js文件时，只要require(‘common’)就可以加载common.js文件了
    //resolve:{
    //    extensions:['','.js','.json']
    //}
    // 当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要
    // 这样我们就可以放心的在项目中使用这些API了：var jQuery = require(“jquery”);
    // externals: {
    //    "jquery": "jQuery"
    // }
    plugins: [
        //js压缩插件
        new webpack.optimize.UglifyJsPlugin()
    ]
};

/**
 * config.json
 **/

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "author": "jiangzilong",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  }
}

附上项目结构

其中build/bundle.js就是我们打包并压缩的js文件，最后在html中引入该script即可
另外对于模块化的格式可以参考：

//b.js
module.exports = {
    print: (msg) => console.log(msg)
}

//main.js
var $ = require('jquery');
var b = require('./b.js');

b.print(300);
$("#div").text("hello world");