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 进行转换。
  4. npm install css-loader style-loader安装 loader
  5. $ webpack demo.js webpack_demo.js --module-bind 'css=style-loader!css-loader' 重新打包,done。
  6. 当然对于其配置可以写在其config文件中webpack.config.js
  7. $ webpack --progress --colors使用webpack打包时显示颜色
  8. $ npm install webpack-dev-server -g安装webpack开发服务器进行开发环境搭建,$ webpack-dev-server --progress --colors运行服务器。

运行dev_server.png

链接