webpack使用总结~
参考资料:http://webpackdoc.com/index.html
什么是 Webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
使用方法
Webpack全局安装:
$ npm install webpack -g
注意:css等其他非JavaScript资源包需要依赖Loder
例: 安装css-loader style-loader
$ npm install css-loader style-loader
1.使用命令行打包
$ webpack entry.js bundle.js
entry.js 起始文件
bundle.js 打包文件
2.使用webpack.config.js 配置文件打包
(需要先添加package.json配置信息)
package.json文件中的内容:
{ "name": "webpack-example", "version": "1.0.0", "description": "A simple webpack example.", "main": "bundle.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "webpack" ], "author": "zhangjiahao", "license": "MIT", "devDependencies": { "css-loader": "^0.21.0", "style-loader": "^0.13.0", "webpack": "^1.12.2" } }
webpack.config.js 文件中的内容:
var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ {test: /\.css$/, loader: 'style-loader!css-loader'} ] } }
别忘了安装依赖
$ npm install
使用webpack打包命令
$ webpack
实例文档下载地址: https://pan.baidu.com/s/1nuQrZoX