注意:本实例中的webpack v2.1.0, extract-text-webpack-plugin v2.0.0。目前网络上很多例子都是webpack _v1.x_和extract-text-webpack-plugin _v1.x_的版本。不同的版本中主要是webpack.config.js写法有点差异。

1. 按模块编译文件(js、css、image等);
2. 支持资源部署(合并、压缩、Hash化、最小化);
3. 支持watch模式,自动编译;
4. 支持Css局部化;
5. 编译 jsx、es6、scss 等资源;
6. 按指定模块化规范自动包装模块

1. 复写模块里的CSS
2. 实时编译和刷新浏览器
3. 自动引入静态资源到相应html 页面
4. 发布到远端机
5. 全局替换指定字符串
6. 本地接口模拟服务
7. 自动给 css 添加浏览器内核前缀
8. 语法检查

1. 安装依赖

   npm install
   

2. 运行npm

   npm start
   

   也可以用npm run dev,修改源码后就会自动编译了。

3. 访问页面

   直接用浏览器打开index.html文件,或者配置服务器打开index.html文件。

1. Webpack v2.x
2. Get filenames from webpack compilation stats