简单快速搭建前端自动化开发环境

npm环境

• 首先官网安装node.js，建议再安装淘宝的npm镜像库

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 建一个新文件夹，并在此打开cmd

npm init

安装模块

--save参数表示将该模块写入dependebcies属性
--save-dev表示将该模块写入devDependencies属性

cnpm install 模块1 模块2 --save-dev

文件目录

• dist：编译后的目录
• src： 源码目录，就是写代码的地方
• .babelrc：es6配置文件
• package.json：项目管理配置文件
• webpack.config.js：webpack配置文件

在线demo

里面有详细介绍使用，点我进入

疑难杂症以及心得

• 在开发环境中，不要给output.filename，即输出后的文件加入md5，比如像这样bundle.[hash:8].js，这样会造成不能实时刷新以及热加载；md5应用于最后一关打包输出到线上。

但是在HtmlWebpackPlugin插件中也有一个hash配置项，此项是加载在文件后缀后面bundle.js.[hash:8]，不影响自动编译