Webpack入门教程
2017-02-20 本文已影响75人
stiller
使用webpack进进行开发，本篇默认读者已经在本机安装了node.js，npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack.png
- 用 npm 安装 Webpack
$ npm install webpack -g，此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h。 - 编译需要编译的JS文件demo.js并打包到webpack_demo.js
$ webpack demo.js webpack_demo.js - 使用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
-
$ webpack --progress --colors使用webpack打包时显示颜色 -
$ npm install webpack-dev-server -g安装webpack开发服务器进行开发环境搭建，$ webpack-dev-server --progress --colors运行服务器。
运行dev_server.png
