webpack学习（二）

时下很火的react项目多用到webpack+ES6，本文只实践webpack的打包功能，不涉及react.

1、新建项目

新建的项目，命令模式下切换到项目根路径，用npm init命令生成package.json。一路回车（熟了可以填写内容），这时再次查看项目，项目根目录下多了个package.json的文件。这个文件里面有项目的各种信息。

2、安装webpack

先全局安装webpack，命令：

$ npm install webpack -g

局部安装webpack，在项目根路径，使用如下的命令：

$ npm install webpack --save-dev

解释下：--save-dev命令会将安装的信息加入package.json中，现在多了这样一项：

"devDependencies": { "webpack": "^1.13.2"}

如果用了 --save命令，则会加入"dependencies"项。

全局，局部安装都不可缺，如果不局部安装webpack，在执行webpack命令的时候会报如下错误：Cannot find module 'webpack'

3、项目实例

完成上面的一步后，还需要添加webpack的配置文件。这个文件不像package.json文件自动生成那样，需要手动添加。在编辑器中打开项目，在项目根路径下添加webpack的配置文件webpack.config.js 。

我们以后以后执行webpack，这个文件就是入口，webpack会查找这个配置文件的去完成各项任务。

以1个项目说明吧，i)先建立了css、images、js文件夹（里面各有一个相应的文件）及index.html。ii)然后生成package.json，iii)安装webpack，添加配置文件webpack.config.js。至此，项目的目录结构如下：

 

iiii)编写配置文件webpack.config.js：

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(' ');

module.exports = {
      // @ ../不行
      entry: {cou:'./js/cou.js'},
      //entry:['./js/cou.js'],
      output: {
        path: path.join(__dirname, './build'),
        filename: 'js/[name].js'
    },

 module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                //loader:'style!css',
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
               test: /\.less$/,
                //配置less的抽取器、加载器。中间!有必要解释一下，
                //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
                //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
                //loader: ExtractTextPlugin.extract("css-loader","less-loader")出错
                 loader: ExtractTextPlugin.extract('css!less')
            },

            {
                test: /\.(png|jpg|gif)$/,
　　　　　　　　　　//name后不写../会在css引入图片的的时候路径出错
                loader: 'url?limit=40000&name=../images/[name].[ext]'
            },
            //对应HtmlWebpackPlugintemplate
            //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
            //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
            {test: /\.html$/,
            loader: 'html?minimize=true'}
        ]
    },
    resolve: {
       root: 'E:/github/flux-example/src', //绝对路径
       extensions: ['', '.webpack.js', '.coffee', '.json', '.js', '.jsx'],
       alias: {
          //设置别名
            "coupon":"./../css/cou.css",
            "bless":"./../less/b.less"
        }
    },

  plugins: [
        new ExtractTextPlugin("css/[name].css"),
        //每次都会覆盖
        new HtmlWebpackPlugin( {
          //html输出的文件名
          filename: 'index.html',
          //压缩的html
          template: './index.html',
           minify:{    //压缩HTML文件
                 removeComments:true,    //移除HTML中的注释
                 collapseWhitespace:false    //删除空白符与换行符
             }
          //new webpack.HotModuleReplacementPlugin() //热加载
        })
    ],

};

　　

以上的配置文件，实现了开发项目中的文件压缩，包括：html、css、js。输出至dist目录，保持项目结构保持不变。最终build目录里的东西就是我们最重要发布的。

有了上面的配置文件，还不能执行webpack的命令。因为配置文件里引入的loader,plugin都还没安装。

iiiii)安装所需的loader,plugin

依然是在命令模式下，切换到项目根路径，安装的命令是：npm install [loader] [plugin] --save-dev。比如安装babel-loader，就可以这样

npm install babel-loader --save-dev。

还可以一次安装多个loader。本项目的loader安装可以简化如下：

npm install babel-loader style-loader css-loader less-loader html-loader --save-dev。

接下来安装两个所需的插件，一样的命令：

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

npm install html-webpack-plugin --save-dev

第一个插件的作用是单独打包css，而不是把打包好的css嵌入到js里，虽然这是webpack模块化的优势，将css也作为模块，但有些情况我们依然希望将css作为一个单独的文件输出。注意，很多个css，也最终合并到同一个css里面。并在输出的html文件中引入。

css需要在入口js中引入，要不然不会压缩的。

4、配置文件详解

webpack的难点就在配置文件webpack.config.js 里了。刚开始学的时候，很是迷茫。就以上面例子的配置为例，强行解释下：

1）前面4行定义变量，引入所需的插件。其中，path和webpck在webpack安装好之后就有的，不需要额外安装。

2）后面的两个插件，分别是独立压缩css和html。如果不需要对css单独压缩，可以不引入第1个。事实上，本例path变量并没有用到。引入之后在plugins数组里有用到。用这个生成对象。

3）webpack的入口文件是1个js。entry后面可以跟数组或对象表示，可以有多个。

4）__dirname是NodeJs里的概念，是NodeJs的全局对象，它表示当前执行脚本所在的完整目录；'./'也是NodeJs里的概念，./ 为当前目录。引入同级文件用这个。

5）module项是最重要的配置，loader和plugin都在这里配置。指明了对资源如何处理。

6）在本例的cou.js里，这么引入的css模块。

require("coupon");

这个是通过别名的方式引入。回到配置文件，我们在module项的 resolve里指定了别名。

alias: {
//设置别名
"coupon":"./../css/cou.css",
"bless":"./../less/b.less"
}

最后解释下，同目录下，要用“./”引入。这根我们写html引入资源的方式不一样。

 5、执行命令

最后，在命令模式下，在项目根路径执行webpack -p。生成build文件夹，里面的代码就是压缩过的，less文件编译并合并到css文件里面。

build展开：

 至此，项目已搭建完毕。每次修改源文件后，也只是执行webpack -p命令生成同步的build文件。