concepts

Posted 2020-10-19 爆炒小黄鸡

webpack是JS应用的静态模块打包工具。webpack在处理你的应用时，会递归的构建依赖项，这些依赖项包括你的应用所需要的所有模块，然后把这些模块打包到一个或多个bundles中。

一、Entry

entry point是项目的入口文件，告诉webpack从哪个模块开始构建内部依赖。进入入口文件后，webpack会直接或间接的找到其依赖的模块和库。

1、定义入口的方式有多种：

1）简写形式（string | array<string>）

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘
}

module.exports = {
  entry: {
    main: ‘./path/to/my/entry/file.js‘
  }
}

上面的写法实际上是下面写法的简写形式

multi-main entry: entry是一个存放文件路径的数组，当你需要将多个依赖文件一起注入并将它们的依赖关系打包成一个chunk时，可以使用这种方式。

2）对象形式（{ [entryChunkName]: string|array<string> }）

const config = {
  entry: {
    app: ‘./src/app.js‘,
    vendors: ‘./src/vendors.js‘
  }
}

 

2、应用场景

1）分离app和vendor入口

const config = {
  entry: {
    app: ‘./src/app.js‘,
    vendors: ‘./src/vendors.js‘
  }
}

 这种形式告诉webpack从app.js和vendors.js开始创建分离的相互独立的依赖。这在单页面应用中很常用。这种设置允许你利用CommonsChunkPlugin将应用中任何vendor的引用抽离到vendor bundle. 这样在你的应用bundle中就没有vendor代码。

2）多页面应用

const config = {
  entry: {
    pageOne: ‘./src/pageOne/index.js‘,
    pageTwo: ‘./src/pageTwo/index.js‘,
    pageThree: ‘./src/pageThree/index.js‘
  }
};

 这种设置方式告诉webpack我们有3个分离的依赖项。在多页面应用中，服务器需要获取新的html文档，页面重新加载新的文档和文件需要重新下载，这样我们就可以可以使用CommonsChunkPlugin将页面间共享的代码提取打包。

黄金条例：每个HTML文档使用一个入口。

 

二、Output

output属性告诉webpack打包文件的输出位置和名字。 output是一个对象，一般需要文件名（filename）和输出路径(path);

const path = require(‘path‘);

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘,
  output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘my-first-webpack.bundle.js‘
  }
};

1、多入口文件

当你的设置会有多个chunk（比如多个入口文件或者使用类似CommonsChunkPlugin），但你需要保证每个文件都有唯一的名字。

{
  entry: {
    app: ‘./src/app.js‘,
    search: ‘./src/search.js‘
  },
  output: {
    filename: ‘[name].js‘,
    path: __dirname + ‘/dist‘
  }
}

 

2、publicPath

当你将应用所需文件存放在CDN或者hash时

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

 如果编译时不确定最终的publicPath,这个值可以设为空白或者不设置，然后在入口文件中使用__webpack_public_path__动态设置。

__webpack_public_path__ = myRuntimePublicPath

// rest of your application entry

 

三、Loaders

loaders可以帮助webpack处理更多类型的文件，不仅限于javascript（webpack自身只能处理JS）。loaders会将各种类型的文件转化为webpack能处理的合法模块。

1、使用方式

1） 配置文件

const path = require(‘path‘);

module.exports = {
  entry: ‘./path/file.js‘,
  output:{
    path: path.resolve(__dirname,‘dist‘),
    filename:‘bundle.js‘,
  },
  modules:{
    rules: [
      {test: /\.txt$/, use: ‘raw-loader‘}，
      {
        test: /\.css$/,
        use: [
          { loader: ‘style-loader‘ },
          {
            loader: ‘css-loader‘,
            options: {
              modules: true
            }
          }
        ]
      }
     ] 
   } 
}

 

2）inline

import Styles from ‘style-loader!css-loader?modules!./styles.css‘;

 

options可以通过query参数形式传递，比如?key=value&foo=bar，或者JSON对象形式，比如?{"key":"value","foo":"bar"} 

3) CLI

webpack --module-bind jade-loader --module-bind ‘css=style-loader!css-loader‘

 

 

四、Plugins

plugins可以做更多的事情，可以优化和更小化打包文件，或者定义环境变量。