webpack应用学习

Webpack使用方法
一.npm 环境下在工作目录 npm init,生成json文件
二.全局环境下安装$ npm install webpack -g
三.本地安装webpack
# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev
四.本地安装webpack
npm install css-loader style-loader –save-dev
五.webpack.config.js配置文件（require('./style.css')）
var webpack = require('webpack')


module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}
六．全局安装本地监听服务器
# 安装
$ npm install webpack-dev-server -g
七.本地项目目录安装
 $ npm install webpack-dev-server --save-dev


八.安装一次后，之后重建项目，只需要json文件然后npm install就可以复用
{
  "name": "webpack123456",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}


常用命令：
# 运行
$ webpack-dev-server --progress --colors
# 构建
$ webpack index.js bundle.js