Webpack资源入口与出口(二)

1.模块化 ES6模块和CommonJS模块

ES6模块化语法

export模块导出,import模块导入,import()函数动态加载模块

CommonJS模块化语法 module.exports导出模块,require('...')导入模块

2.资源模块

2.1入口

entry和context,entry是资源入口,context是基础目录,context表示entry是以哪一个目录为起点的

var path = require('path');  

module.exports = {
context: path.resolve(__dirname, './src'),
entry: './js/a.js',   // a.js里又引入了b.js
output: {
 path: path.resolve(__dirname, ''),
 filename: 'bundle.js'
},
mode: 'none'
};

这样资源入口基本目录就成了根目录的src文件夹,资源入口成了根目录绝对路径/src/hs/a.js

2.2出口 output.filename

const path = require('path');

module.exports = {
  entry: './a.js',
  output: {
    path: path.resolve(__dirname, ''),
    filename: '[fullhash].js'
  },
  mode: 'none'
};

除了fullhash还有chunkhash,contenthash [hash]还有类似的[name],[id],[ext],[query]等等,.ext表示拓展名,query表示参数,
name,字符串形式和数组形式的entry的name是main,对象形式的entry是对象的属性名,比如

const path = require('path');

module.exports = {
  entry: {
    app1: './a.js',
    app2: './f.js',
  },
  output: {
    path: path.resolve(__dirname, ''),
    filename: '[name].js'
  },
  mode: 'none'
};

这个时候输出文件的名字是app1.js,app2.js