webpack初见

1、什么是webpack? 他有什么优势？

    首先对于不少刚接触webpack人来讲，确定会问webpack是什么？它有什么优势？咱们为何要使用它？带着这些问题，咱们来总结下以下：

    Webpack是前端一个工具，可让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp全部基本功能。优势以下：

1. 支持commonJS和AMD模块。
2. 支持不少模块加载器的调用，可使模块加载器灵活定制，好比babel-loader加载器，该加载器能使咱们使用ES6的语法来编写代码。
3. 能够经过配置打包成多个文件，有效的利用浏览器的缓存功能提高性能。
4. 使用模块加载器，能够支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
5. 更多等等。。。带着这些问题咱们慢慢来学习webpack。二：如何安装和配置

二：如何安装和配置

1.咱们常规直接使用 npm 的形式来安装：

$ npm install webpack -g

固然若是常规项目仍是把依赖写入 package.json 包去更人性化：

$ npm init
$ npm install webpack --save-dev

2.配置webpack

每一个项目下都必须配置有一个 webpack.config.js ，它的做用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它须要作什么。

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
 
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

配置说明：

1).entry

能够是个字符串或数组或者是对象。

当entry是个字符串的时候，用来定义入口文件：

entry: './js/main.js'

当entry是个数组的时候，里面一样包含入口js文件，另一个参数能够是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server会监控项目中每个文件的变化，实时的进行构建，而且自动刷新页面：

entry: [
     'webpack/hot/only-dev-server',
     './js/app.js'
 ]

2).output

参数是个对象，用于定义构建后的文件的输出。其中包含path和filename：

output: {
        path: 'dist/js/page',
        filename: '[name].js'
},

3).module

关于模块的加载相关，咱们就定义在module.loaders中。这里经过正则表达式去匹配不一样后缀的文件名，而后给它们定义不一样的加载器。好比说给less文件定义串联的三个加载器（！用来定义级联关系）：

module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
},

4).resolve

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序能够自行补全哪些文件后缀：

resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
}

3、运行 webpack

ebpack 的执行也很简单，直接执行

$ webpack --display-error-details

便可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（好比 webpack 寻找模块的过程），从而更好定位到问题。

其余主要的参数有：

$ webpack --config XXX.js   //使用另外一份配置文件（好比webpack.config2.js）来打包
 
$ webpack --watch   //监听变更并自动打包
 
$ webpack -p    //压缩混淆脚本，这个很是很是重要！
 
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

 

参考网址：http://www.cnblogs.com/Leo_wl/p/4862714.html

                 http://www.w2bc.com/Article/50764