工具学习——webpack 项目打包

  webpack是一个专注于打包的工具。也就是把许多零碎的文件组合在一起，达到前端优化的效果。

•  打包原理

              

              确定入口文件：即所有程序的入口

              获取依赖：核心功能，分析依赖的顺序，并将各个文件按照依赖关系依次打包下去。

              确定出口文件：一般打包都是输出一个文件，但也有打包成多个文件的，比如说common、异步文件等

              打包：输出最终内容。

• webpack依赖

        使用webpack 核心就是配置config，我们需要关注的核心配置是：entry、output、resolve、externals、watch、loader、plugins。

         默认的配置文件是webpack.config.js

1. entry

             即配置项目的入口文件。有3个option，分别是string，array，object。前两者打包为一个文件，object打包为多个文件

             string：指定入口文件。

             array：多个入口文件、最终打包在一起。

             object：多chunk，key指定chunk的名字，value指定chunk的地址。

         2. output

             

             配置出口文件的名字和路径， 以及出口文件命名的格式。

            一般为：

output{
   path：_dirname + '/dist', //指定输出文件的文件名，不建议带路径 
   filename:"[name].js" 
}

            如果是打包库文件：

        

output{
    path：_dirname + '/dist',
    filename: "[name].js",
    library:'L',
    libraryTarget:'umd'
}

       3. resolve

 

           主要是分析依赖时的路径识别配置。

           resolve.root：指明包含所需模块的目录（必须是绝对路径！）

resolve{
  root[
     path.resolve('./app/modules'),
     path.resolve('./vendor/modules')
   ]
}

        resolve.alias:路径配置规则。是一个object，key是模块的名字，value是路径。如果key名中包含$，则只有精确匹配的才会被代替。规则如下：如果在/abc/entry.js中设置不同的依赖。

     4.　externals

      配置外部依赖。如果有引入第三方的库，则在这里进行配置。如

externals{
 'jquery':{
           root: 'jquery',
            amd: 'jquery',
            commonjs2: 'jquery',
            commonjs: 'jquery'
  }
}

 5. watch

    watch 模块将在文件变更之后rebuild。主要有两个option：

    aggregateTimeout：只有在使用CLI或者简单的node.js API的时候才用。在第一次改变之后延迟rebuild的时间，value的单位是ms。缺省值是300

    poll:只有使用CLI和简单的node.js API的时候才使用。设置为true表示使用轮训，number是设置轮训的时间间隔，单位是ms。

 6. loader

    告知不同的文件需要使用什么加载器。

    test：用来匹配相对应文件的正则表达式

    loaders：告诉webpack要用哪种加载器来处理test所匹配的文件。

module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }

    loaders安装方法：

 

$ npm install xxx-loader --save-dev

  7. plugins 

     可以给webpack安装不同的插件。插件的类型有两种，一种是内置插件，一种是第三方插件。

     安装内置插件：

var webpack=  require('webpack');
module.exports = {
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
};

    安装第三方插件：

  

//npm install component-webpack-plugin 先要在安装该模版
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}