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

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

1 安装node+npm

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

node -vnpm -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.jsmodule.exports = {    print: (msg) => console.log(msg)}//main.jsvar $ = require('jquery');var b = require('./b.js');b.print(300);$("#div").text("hello world");