webpack2详解

[huangchucai]

webpack2详解

1. 项目小工具

• anywhere

  npm i -g anywhere   //全局安装anywhere	
  // 使用
  1. 在相应的目录下面启动anywhere命令行

• 命令行小技巧

  anywhere &   //释放当前命令行，生成一个id,一直执行anywhere

• jobs 查看你目前命令行的工作进程
  

webpack处理流程 entry=> rules(loaders)=> webpack=> output

2. entry

//webpack.config.js
// 字符串配置  默认[name] => main
let base = './index.js'  

// 对象配置
let base = {
	  index:'./index.js',
   	  index1:'./index1.js'
};
//webpack2 提供了多种配置方案 函数配置
const dynamic_entry = ()=>base;

//执行new Promise() 返回一个base
const dynamic_entry_promise=()=>{
	return new Promise((resolve,reject)=>{
		resolve(base)
	})
}


module.exports = {
  entry:dynamic_entry_promise,
  output: {
    filename: '_[name].js' //[name] 对应 entry中的key
  }
};

3. output

**path: **最好是一个绝对路径

filename:

• filename:'[chunkhash:3]_[name].js'

  • [chunkhash] webpack每次编译的时候，认为数据来源是一个chunk(块)，chunkhash就是hash值,指定的hash值是3

• hashDigestLength: 3 ; filename: '[chunkhash]_[name].js'

  // hash存在2中情况
  1. [hash] 对整个过程有一个hash值
  2. [chunkhash]  对每一个文件都有一个hash值
  
  //使用[hash]导出文件 
  hashDigestLength:2,
    //hash ==> webpack编译过程
    // chunkhash => webpack对每个文件的hash
  filename: '_[hash][name].js'   
  //导出的整个过程的hash值都一样 _d1index.js  _d1index1.js
  
  //使用[chunkhash]导出文件
  hashDigestLength:2,
  filename: '_[chunkhash][name].js'
  // 导出的每一个文件的hash  _54index1.js  _d2index.js

  ​

• library: "MyLibrary" //定义包的名字，导出给别人使用

  **默认情况下：**仅仅设置library的话，就会导出一个变量给别人使用，但是一般都会和libraryTarget一起使用，定义相应的包规范。

  // 如果在源文件中模块到处内容，可以在引入文件中是用Mylibrary得到导出的值
  // 源文件index.js中导出1 
  module.exports = 1
  // index.html中引用导出的文件 可以应用Mylibrary使用相应的导出文件
  Mylibrary = 1

  • libraryTarget: 'umd' libraryTarget:'commonjs', libraryTarget:'amd'//定义打包出来后的包兼容 common.js amd windows等

  // umd 
  (function webpackUniversalModuleDefinition(root, factory) {
  	if(typeof exports === 'object' && typeof module === 'object')
  		module.exports = factory();  //兼容了common.js
  	else if(typeof define === 'function' && define.amd)
  		define([], factory);   //兼容了amd
  	else if(typeof exports === 'object')
  		exports["MyLibrary"] = factory();
  	else
  		root["MyLibrary"] = factory();   //兼容了全局变量window
  })
  
  // common.js
  exports["MyLibrary"] = .....
  
  // amd 
  define("MyLibrary", [], function() { return /******/ (function(modules) {......

  • chunkFilename 用于异步加载模块chunkFilename:'[chunkhash].js', chunkFilename:'[chunkhash]_[name].js' chunkname的运用 导出文件的文件名

• publicPath 一般用于异步加载 指定异步加载的文件导出后的路径 和静态服务器的启动路径关联

  //异步加载  
  // require.ensure用于异步加载，webpack1和webpack2官网提到。require.ensure会创建一个chunk，且可以指定该chunk的名称
  // 很像amd的规范（amd本身就是用于异步加载）
  // 三个参数 1.dependencies需要的依赖 2. require()函数，异步加载的内容)(callback函数)  3. 模块名，用于构建时生成文件时命名使用(chunkname)
  require.ensure([],(require)=>{
  	require('./index1.js')
  },'dynamic')

  //导出异步加载的文件名
  chunkFilename:'[chunkhash].js',
  // 查看导出的文件后，简单分析下导出后的代码一部分

__webpack_require__.e = function requireEnsure(chunkId) {

// // start chunk loading
// var head = document.getElementsByTagName('head')[0];
// var script = document.createElement('script');
// script.type = 'text/javascript';
// script.charset = 'utf-8';
// script.async = true;
// script.timeout = 120000;
//
// script.src = webpack_require.p + "" + {"0":"93"}[chunkId] + ".js";
// head.appendChild(script);
// 相当于创建一个script的异步加载相应的文件名，赋予了相应的参数
// <script type="text/javascript" charset="utf-8" async="" src="/output/xxxdist/93.js"></script>

// 设置了publicPath
publicPath: "/output/xxxdist/", // server-relative
webpack_require.p 到底是一个什么东东，看看导出文件
// // webpack_public_path
// webpack_require.p = "/output/xxxdist/";
​

  **反思：**

  1. 如果我改变publicPath设置成一个别的路径会不会报错`publicPath: "/asset/"`

     ```javascript
     // 导出的src的寻找路径是/asset/下面的对应的文件名  
     /******/ 	// __webpack_public_path__
     /******/ 	__webpack_require__.p = "/asset/";
     /******/ 	script.src = __webpack_require__.p + "" + {"0":"93"}[chunkId] + "_" + ({"0":"dynamic"}[chunkId]||chunkId) + ".js";

 ![publicPath](C:\Users\Z7\Desktop\publicPath.png)

4. module

​ module.rules: 定义使用的模块规则，是一个数组，包含一个对象，定义了一些要编译的内容和使用的loader。如果满足test的部分就使用use

​ **use：**是一个数组，里面是各个需要使用的loader对象

module:{
  rules:[
    {
      test: /\.jsx?$/,  //定义使用loader的类型
      exclude: [
        'node_modules'   // 除去的模块名
      ],
      // use是一个数组，里面是各个对象，使用不同的loader
      use:[{
        loader: "babel-loader",  //要使用的loader
      }]
    },
  ]
}

5. resolve

​ resolve.alias: 别名，值是一个对象，里面是一个key和value，对应相应的名字和路径

// webpack.config.js
resolve:{
  alias:{
    test: path.resolve(__dirname,'test/test/test.js')
  }
}

//在文件中使用require 引入相应的模块名
// index.js
require('test')   //相当于引用绝对路径的__dirname+'test/test/test.js'

6. devtool 开发工具

让我们在源文件中使用debugger，查看源文件

devtool:'source-map',

7. loaders 对每一个文件进行预处理

对于css部分使用loader的时候需要进行预处理，然后实现相应的代码的引用，通常css,scss,less都是要通过plugins进行配置和搭配

options：对引用进行个性化的设置

plugins:[
  new ExtractTextPlugin({
    filename: "[name].css",
    disable: false,
    allChunks: true
  })
],
  module:{
    //entry => loaders ==> webpack ==> output
    rules:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        use:[{
          loader:'babel-loader'
        }]
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use:[{
            loader:'css-loader',
            options: {
              sourceMap: true
            }
          }]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:['css-loader',{
            loader:'less-loader',
            options: {
              sourceMap: true
            }
          }]
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:['css-loader',{
            loader:'sass-loader',
            options: {
              sourceMap: true
            }
          }]
        })
      },
      {
        test: /\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
        use: [{
          loader:'file-loader',
          options:{
            name:'[name]_[sha512:hash:base64:7].[ext]'
          }
        }]
      },
      {
        test: /\.html/,
        use:[{
          loader:"html-loader",
          options:{
            minimize: false,
            attrs:false
          }
        }]
      }
    ]
  }
};

8. plugins webpack插件的使用

webpack有一个相应的编译过程

webpack lifecycle before-complitaion run done => 预处理 运行 运行完成

// 全局引用jquery webpack run 阶段使用
new webpack.ProvidePlugin({
  $: 'jquery'
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  minChunks: Infinity
})