webpack基本使用

第一章：webpack简介

1.1 webpack是什么

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

1.2 webpack五大概念

1.2.1 entry:

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
单入口:

module.exports = {
  entry: './src/index.js'
};

多入口：

module.exports = {
    entry: {
        main: './src/index.js',
        test: './src/test.js'
    }
};

1.2.2 Output:

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
当入口文件为单入口时：

  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'build')
  }

当入口文件多入口时（其中name相对应入口文件名称，contenthash:10指10位数的hash值，使得产生文件的唯一性）：

output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
}

1.2.3 Loader:

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理

module.exports = {
	entry: "./src/js/index.js",
	output: {
		filename: 'js/built.js',
		path: resolve(__dirname, 'build')
	},
	module: {
		rules: [{
			// 处理less资源
			test: /\.less$/,
			use: ['style-loader', 'css-loader', 'less-loader']
		}, {
			test: /\.js$/,
			exclude: /node_modules/,
			loader: 'eslint-loader',
			enforce: 'pre', // 优先执行，需要在js的兼容性处理之前执行
			// 消除检查过程中的问题
			options: {
				fix: true
			}
		}]
	}
}

我们可以看到其中使用了两个重要的属性：test，use
1: test : 用于标识出应该被对应的 loader 进行转换的某个或某些文件。
比如当程序中使用了less时，test： /.less$/ 表示在编译时检索到的以.less结尾的文件进行处理，至于怎么处理，这时候use的作用就出现了。
2: use 属性，表示进行转换时，应该使用哪个 loader。
接上1，use表示处理这个test，要使用什么loader，use: [‘style-loader’, ‘css-loader’, ‘less-loader’] 表示将less先编译成css，再转成style，

1.2.4 Plugins:

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: "./src/js/index.js",
	output: {
		filename: 'js/built.js',
		path: resolve(__dirname, 'build')
	},
	module: {
		rules: [{
			// 处理less资源
			test: /\.less$/,
			use: ['style-loader', 'css-loader', 'less-loader']
		}, {
			test: /\.js$/,
			exclude: /node_modules/,
			loader: 'eslint-loader',
			enforce: 'pre', // 优先执行，需要在js的兼容性处理之前执行
			// 消除检查过程中的问题
			options: {
				fix: true
			}
		}]
	},
	    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

对于插件的功能，其实就类似于java语言中引用的依赖包，这里是下载一个依赖在node_modules中，再通过

const HtmlWebpackPlugin = require('html-webpack-plugin')

这快代码将依赖加载引入作为一个常量，将其实例化即可引用。

1.2.5 Mode:

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化。

第二章：webpack使用

2.1 初始化配置

1: 初始化 package.json;（前提你已安装好node.js)
指定目录下输入指令: npm init即可

2： 下载并安装 webpack 输入指令:
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

2.2 编译打包应用

1： 创建文件

2：运行指令

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成 浏览器能识别的语法。

生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

功能：在开发配置功能上多一个功能，压缩代码。

3：结论
webpack 能够编译打包 js 和 json 文件。 能将 es6 的模块化语法转换成浏览器能识别的语法。 能压缩代码。

官方链接：https://webpack.docschina.org/concepts/