webpack

http://webpack.github.io/docs/tutorials/getting-started/

1.安装

$ npm install webpack -g

(1)开始
entry.js

document.write("It works.");

index.html

运行命令打包后，直接可以用了

$ webpack ./entry.js bundle.js

（2）进阶
添加content.js

module.exports = "It works from content.js.";

修改entry.js

 document.write(require("./content.js"));

执行命令

$ webpack ./entry.js bundle.js

(3)Loader使用
webpack 仅能处理原生js，需要用css loader处理css文件

npm install css-loader style-loader --saveDev

添加css文件

body {
    background: yellow;
}

跟新entry.js

+ require("!style!css!./style.css");
document.write(require("./content.js"))

注意：require("!style!css!./style.css");有点长
修改

- require("!style!css!./style.css");
+ require("./style.css");
  document.write(require("./content.js"));

运行

webpack ./entry.js bundle.js --module-bind 'css=style!css'

(4)配置文件的使用
添加webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

执行打包命令

webpack

（5）优化
--progress --colors 用于监控进度
--watch 用于监控变化

webpack --progress --colors --watch

服务端端webpack启动

npm install webpack-dev-server -g

启动

webpack-dev-server --progress --colors

2.常见配置项

var config = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
  resolve: { 
    alias: {}
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [],
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      loader: 'style!css'
    }, {
      test: /\.less$/,
      loader: 'style!css!less'
    }]
  }
};

alias
用来告诉webpack，当引入react时，试图去匹配压缩过的react；
noParse
当webpack尝试去解析压缩文件时，这种行为是不允许的。

resolve:{
        extentions:["","js"]//当requrie的模块找不到时，添加这些后缀
    },

entry
配置要打包的文件的入口;可以配置多个入口文件
resolve
配置文件后缀名(extensions)，除了js，还有jsx、coffee等等。alias配置项，可以为常用模块配置改属性，可以节省编译的搜索时间。例如：

    resolve:{
        extensions:['.js','.jsx'],
        alias:{
            'react':path.join(nodeModulesPath,'react/react.js')
        }
    }

loader配置项：

test: /\.(js|jsx)$/,           //注意是正则表达式，不要加引号，匹配要处理的文件
loader: 'eslint-loader',       //要使用的loader，"-loader"可以省略
include: [path.resolve(__dirname, "src/app")],   //把要处理的目录包括进来
exclude: [nodeModulesPath]     //排除不处理的目录

plugins
顾名思义，就是配置要使用的插件。plugin是比loader功能更强大的插件，能使用更多的wepack api。来看一个使用plugin的例子：

plugins: [
    //压缩打包的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        //supresses warnings, usually from module minification
        warnings: false
      }
    }),
    //允许错误不打断程序
    new webpack.NoErrorsPlugin(),
    //把指定文件夹xia的文件复制到指定的目录
    new TransferWebpackPlugin([
      {from: 'www'}
    ], path.resolve(__dirname,"src"))
  ]

webpack-dev-server

安装

npm install webpack-dev-server --save -dev

module.exports = config;
var config = {
    entry:path.resolve(__dirname,'src/main.js'),
    resolve:{
        extentions:["","js"]
    },
    //Server Configuration options
    devServer:{
        contentBase: '',  //静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录
        devtool: 'eval',
        hot: true,        //自动刷新
        inline: true,    
        port: 3005        
    },
    devtool: 'eval',
    output:{
        path:buildPath,
        filename:"app.js"
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),//这个好像也是必须的，虽然我还没搞懂它的作用
        new webpack.NoErrorsPlugin()
    ]
}

运行

webpack-dev-server --config webpack-dev-config.js --inline --colors

http://localhost:3000/index.html(根据配置会不一样)

有一点需要声明，在index.html（引用导出结果的html文件）里直接引用“app.js”，不要加父级目录,因为此时app.js在内存里与output配置的目录无关：