使用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
运行服务器。
网友评论