用 npm 安装 Webpack：

$ npm install webpack -g

# 查看 webpack 版本信息

$ npm info webpack

# 安装指定版本的 webpack

$ npm install webpack@1.12.x --save-dev

如果需要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

//entry.js

document.write('It works.')

document.write(require('./module.js')) // 添加模块

编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

安装 extract-text-webpack-plugin //css样式从js文件中分离

$ npm install extract-text-webpack-plugin --save-dev

安装 loader：

$ npm install css-loader style-loader //css

webpack配置sass模块的加载

//在项目下，运行下列命令行

npm install --save-dev sass-loader//因为sass-loader依赖于node-sass，所以还要安装node-sass

npm install --save-dev node-sass

一般运行会失败，解决方法：

解决方案1:

装python2.7，用cnpm安装sass

解决方案2:

npm uninstall node-sass

npm install node-sass@latest

解决方案3:

FQ试试，或者用淘宝提供的cnpm

npm 改为cnpm

淘宝镜像安装：

1.临时使用

npm --registry https://registry.npm.taobao.org install express

2.持久使用

npm config set registry https://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功

npm config get registry

// 或npm info express

Webpack.config.js 内容

 1 var webpack = require('webpack')
 2 var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
 3 module.exports = {
 4     ////页面入口文件配置
 5     entry: './entry.js',
 6     //入口文件输出配置
 7     output: {
 8         path: __dirname,
 9         filename: 'bundle.js'
10     },
11     module: {
12         //加载器配置
13         loaders: [
14             {test: /\.css$/, loader:ExtractTextPlugin.extract("style", 'css')},
15             {
16                 test: /\.scss$/,
17                 loader: ExtractTextPlugin.extract("style", 'css!sass')  //ExtractTextPlugin.extract("style", 'css!sass') 这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
18             }
19         ]
20     },
21     //其它解决方案配置
22     resolve: {
23         root: 'E:/github/flux-example/src', //绝对路径
24         extensions: ['', '.js', '.json', '.scss'],
25         alias: {
26             AppStore : 'js/stores/AppStores.js',
27             ActionType : 'js/actions/ActionType.js',
28             AppAction : 'js/actions/AppAction.js'
29         }
30     },
31     //插件项
32     plugins: [
33         new webpack.BannerPlugin('This file is created by zhaoda'),//文件头部添加注释信息
34         new ExtractTextPlugin("style4.css") //提取出来的样式放在style.css文件中
35     ]
36 }

View Code

开发环境

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

$ webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

$ webpack --progress --colors --watch打发打发

当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装

$ npm install webpack-dev-server -g

# 运行

$ webpack-dev-server --progress --colors

一般情况下，webpack 如果出问题，会打印一些简单的错误信息，比如模块没有找到。我们还可以通过参数 --display-error-details 来打印错误详情。

$ webpack --display-error-details

更多内容请查看 Webpack 中文指南

webpack命令行总结

开发环境

推荐阅读