Webpack入门教程

使用webpack进进行开发，本篇默认读者已经在本机安装了node.js，npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

webpack.png

1. 用 npm 安装 Webpack$ npm install webpack -g，此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h。
2. 编译需要编译的JS文件demo.js并打包到webpack_demo.js$ webpack demo.js webpack_demo.js
3. 使用Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

• npm install css-loader style-loader安装 loader
• $ webpack demo.js webpack_demo.js --module-bind 'css=style-loader!css-loader' 重新打包，done。
• 当然对于其配置可以写在其config文件中webpack.config.js

4. $ webpack --progress --colors使用webpack打包时显示颜色
5. $ npm install webpack-dev-server -g安装webpack开发服务器进行开发环境搭建，$ webpack-dev-server --progress --colors运行服务器。

运行dev_server.png