webpack（三）webpack.config.js配置文件

webpack.config.js配置文件

path.join与path.resolve的区别

1、__dirname
__dirname（该单词前面是两个小的下划线）：返回当前文件所在的绝对路径
2、引入模块

const path = require('path')

3、path.join与path.resolve的区别
（1）path.join()
语法：path.join([path1], [path2], […])
作用：拼接路径。在unix系统中路径分隔符是“/”，在window系统中路径分隔符是""

const path = require('path')
console.log(path.join('a', 'b', '..', 'c/', './d'));
// 将path片段都连接起来
// 输出：a/c/d
path.join("a", "b1", "..", "b2")  //console打印得到"/a/b2"

总结：从右向左进行拼接，若该参数的前一个参数是 “. .”（两个小点），则不拼接“. .”的前一个参数，其余正常拼接。
（2）path.resolve()
语法：path.resolve([from…] , to)
将参数to位置的字符解析到一个绝对路径里，[from … ]为选填项，路径源。
给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径。
作用：将相对路径转换为绝对路径。“/”作为绝对路径的根目录，遇到 “/”则回到根目录解析，解析完成。总是返回一个以相对于当前的工作目录（working directory）的绝对路径。
用法：

var path = require("path")     //引入node的path模块

path.resolve('/foo/bar', './baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz')   // returns '/baz'
path.resolve('/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz')   // returns '/home/foo/baz'
path.resolve('home','foo/bar', '../baz')   // returns '/home/foo/baz'

总结：1）从右往左，若字符以 / 开头，不会拼接到前面的路径；2）若以 …/ 开头，拼接前面的路径，且不含最后一节路径；3） 若以 ./ 开头 或者没有符号 则拼接前面路径；

webpack.config.js配置

1、在项目的webpack项目根目录下创建webpack.config.js文件。

2、在webpack4.x中默认约定将打包入口文件（打包前的文件）放在src ->index.js中，打包输出文件（打包后的文件）放在dist ->main.js中，因为可以自定义，在配置文件中说明路径。（下面是自定义）

3、编写js中的内容（hello.js）

function helloWorld(){
  alert("今天是周末1");
}

4、配置webpack.config.js中的内容

const path = require('path');   //引入模块

module.exports ={    //js资源的打包
  mode:"development",    //webpack4.x需添加的内容
  entry: path.join(__dirname,'./src/script/hello.js'),   //打包入口文件路径
  output: {   //打包完输出的文件
    path: path.join(__dirname,'./dist'),   //打包输出文件的路径
    filename: "hello.boudle.js"    //打包输出的文件
  }
}

注：（1）webpack4.x需要添加代码说明mode选项，可选择为development（开发模式）和production.（产品模式，这个模式会压缩打包好的文件）
（2） webpack 是基于 Node 构建的；所以 webpack支持所有 Node API 和 语法
（3） webpack4.x 中的特性，如果你的打包文件和打包输出文件放在默认路径下就不需要再配置打包入口文件和出口文件了（在3.x的版本，就需要配置入口和打包出口文件）
在webpack4.x版本中，有一个很大的特性，就是约定大于配置，约定默认打包入口路径是 src -> index.js，dist ->main.js

报错：将module.exports写成module.export

5、在html文件中引用打包出口的资源

<script type="text/javascript" src="./hello.boudle.js" charset="utf-8"></script>

6、在控台webpack项目根目录下输入命令webpack，打包完成

入口（entry）

入口起点 指示webpack应该使用哪一个模块，来作为其颞部依赖图的开始
通过在webpack中配置entry属性，来制定一个入口起点（或多个入口起点），默认值为./src
（1）单个入口（简写）语法
用法：entry: string|Array

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

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

（2）对象语法（多个注入口）
向 entry 传入一个数组
用法：entry: {[entryChunkName: string]: string|Array}

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};
module.exports=config;

常见场景：
以下列出一些入口配置和他们的实际用例
分离应用程序（app）和第三方库（vendor）入口
webpack.config.js

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

多页面应用程序

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

为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。
每个 HTML 文档只使用一个入口起点。

出口（output）

output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist，基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

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）filename：用于输出的文件名
（2）path：目标输出目录的绝对路径

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
path： 模块是Node.js核心模块，用于操作文件路径

多个入口起点:
如果配置创建了多个单独的 “chunk”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
  //多个入口filename就使用占位符[name].js，也可以用[name]-[hash]占位；
  // [name]是entry的对象名，[hash]是此次打包的哈希值
    filename: '[name].js',   
    path: __dirname + '/dist'
  }
}

loader

loader让webpack能够处理那些非javaScript文件 （webpack本身只理解javaScript）。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。

在webpack的配置中loader有两个目标：
（1）test属性：用于表示出应该被对应的loader进行转换的某个或某些文件
（2）use属性：表示进行转换时，应该使用哪一个loader

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;

对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：当碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。

重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。

插件（plugins）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;