webpack学习

一.什么是webpack

webpack就是将我们杂乱的页面资源，有脚本文件、样式文件、图片文件等等，各种文件之间的引用。经过webpack的打包整理，生成静态文件；

webpack的工作方式是：通过配置文件找到入口文件，从这个文件找到你项目依赖的所有资源文件，使用对应的资源加载器来处理这些资源文件，最后打包成静态文件。

二.安装webpack

//全局安装webpack
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack

创建项目目录

-- src
--dist
  --js
    --index.js
  --css
    --style.css
--package.json //使用npm init自动生成
--webpack.config.js //这里需要自己配置

三.webpack配置文件

webpack.config.js 配置文件通过exports导出一个对象，这个对象中有三个模块比较重要：entry、output和module，具体如下：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry:{
        //这里配置入口文件路径
        index: './js/index.js',
        list: './js/list.js'
        //多个页面的入口
    }
    output:{
        path: path.resolve(__dirname,'dist'), //文件打包好到这个文件夹下面
        filename: '[name].bundle.js', //[name]表示入口的属性名叫什么就输出对应的文件
        publicPath:'./dist'
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    },
    plugins:{
        
    }
}

四.提取公共的脚本并压缩

有时候多个公共脚本中有公用的部分，如果多写就显得有点多余，我们可以利用webpack的提取公共部分的插件来帮助我们提取。

在plugins属性中添加如下代码：

    plugins: [
    //压缩代码
    newwebpack.optimize.UglifyJsPlugin(),
    //提取公共部分
    newwebpack.optimize.CommonsChunkPlugin('common.js')
    ]

再次执行webpack命令，我们在build文件夹里看到多出了一个common.js文件，这个就是提取出的公共部分。

五.独立出样式文件

通过 style 标签引入样式可能会让页面的代码看起来非常的庞大非常的凌乱，有时候我们需要将所有的样式导出到一个独立的样式文件，然后通过 link 标签引入样式文件。

这时候我们就需要用新的插件。通过 npm install 命令安装extract-text-webpack-plugin插件。

npm install extract-text-webpack-plugin --save-dev

安装完插件我们就需要在 webpack.config.js 文件中进行配置了。

    varExtractTextPlugin =require("extract-text-webpack-plugin");
    module.exports = {
    // ...省略部分代码
    module: {
    loaders: [
    // ...省略部分代码
     {test:/\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")}
     ]
     },
    plugins: [
    newwebpack.optimize.CommonsChunkPlugin('common.js'),
    newExtractTextPlugin("[name].css")
     ]
    }

我们再使用webpack命令打包一下，看到 build 文件夹中看到多了一个index.css文件，就是插件提取出来的所有页面样式，都在一个文件中。

六.使用ES6

ES6简洁的语法糖、性能的提升都让开发者对其深深的“迷恋”，下面来让我们的项目也来支持ES6的语法。

要想支持ES6首先要安装对应的解码器，es6的解码器就是babel，首先安装 babel-loader ：

npm install babel-loader --save-dev

然后改写配置文件：

loaders: [
// ...省略部分代码
 { test:/\.js[x]?$/,loader:'babel'}
]

配置完成后我们就可以在js中尽情地使用es6的语法糖了。