webpack基本配置的详细使用记录（二）

上一篇主要是记录了webpack的基本使用方法，没有使用到webpack.config.js配置文件的，那么本次记录主要说明webapck配置文件的基本使用和怎么样通过配置文件来使用webpack。

一、本例目录

本例子我们还是用上一篇的项目目录和文件代码，大概如下图所：

hello.js代码如下：

function yuan(){
    var yuan="我是一个js文件啊，刚被创建";
    document.getElementById("yuan").innerHTML=yuan;
}
yuan();

main.js代码 

require("./hello.js");
function yuan1(){
    var yuan1="我是的第二个函数,现在我是入口文件了";
    console.log(yuan1);
}

二、通过创建webpack.config.js配置文件来使用Webpack

关于webpack.config.js，每个项目下都应该配置有一个 webpack.config.js ，如果你使用过gulp，那么它的作用就如同gulpfile.js，就是一个配置项，告诉 webpack 它需要做什么。有了配置文件，如果你需要打包文件只需要在命令终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令就会自动参考webpack.config.js文件中的配置选项打包你的项目了。
那么，我们在我们的项目test下创建webpack.config.js文件

module.exports = {
  entry: __dirname + "/src/scripts/main.js",  //入口文件
  output: {
    path: __dirname + "/dist/js",  //打包后的文件存放的地方
    filename: "build-[hash].js"    //打包后输出文件的文件名加hash值，不加hash也可以，加的话最后会生成比如build-866f5586e8e2d2dcef5d.js的文件
  }
}

1、“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录，也可以不用它。

2、entry是入口文件配置，可以是一个文件或者多个入口文件，可以是对象格式或者数组格式。

entry: {

   index : ‘./src/scripts/main.js’,

   pageA:’./src/scripts/pageA.js‘

}

entry:[‘./src/scripts/main.js’,’./src/scripts/pageA.js’]

3、output 是对应输出项配置，path代表输出的路径，filename代表输出的文件名称，publishPath代表静态资源发布后的前缀地址。

4、[hash],其实是每次打包都生成的一个hash值，还有[chunkhash]，这个是相当于md5值一样的唯一性，比如我们在两次编译中，如果某个chunk根本没有发生变化，那么该[chunkhash]也就不会发生变化，简单说就是我们文件改动时这个值才改变。大家可以实践一下就知道了。

关于更多配置请查看http://webpack.github.io/docs/configuration.html

我们运行命令，此时我们只需运行webpack就可以了

webpack 

如果我们的webpack.config.js名字修改为webpack.dev.config.js，那么我们如下命令运行

$ webpack –config webpack.dev.config.js

最后会在我们的目录/src/build/js下看到如下的文件：
build-866f5586e8e2d2dcef5d.js
这就是打包后生成的文件，是不是感觉直接在命令里输入简单多了，这是使用Webpack的另一种方法，不用管那繁琐的命令行参数了。我们都可以事先在webpack.config.js里配置好的。同理要把css打包进去，我们也可以通过配置loader来实现之前的require(“style-loader!css-loader!../style/style.css”);这样就不用每次都在代码了写loader了。下面我们来看下loader的使用

三、loader的使用

因为webpack 本身只能处理 JavaScript 模块，如果要处理各种各样类型的文件，就可以通过使用不同的 loader 来进行转换。loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如css、 less或图片。如我们常用使用的css-loader，style-loader等

loader需要单独安装并且需要在webpack.config.js下的module关键字下进行配置，module.loaders的配置选项包括以下几方面：

test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）

loader：loader的名称（必须）

include/exclude:：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

我们要把css打包进去，那这是我们的配置如下：（当然我们在使用loader（如style-loader和css-loader）前，先要用npm安装好它）

module.exports={
    entry:{
       main:'./src/scripts/main.js'
    },
    output:{
        path:"./dist/js",
        filename:"[name]-[hash].js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/, 
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

main.js改为如下

require("./hello.js");
require("../style/style.css");
function yuan1(){
    var yuan1="我是的第二个函数,现在我是入口文件了";
    console.log(yuan1);
}

最后会在我们的目录/src/build/js下看到如下的文件：main-04ec01c46a0704d1fad2.js，里面已经把css打包进去了。

三、常见loader的使用

待续…..