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