webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目的文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可以运行在浏览器中。一般的我们将webpack输出的文件叫做bundle
随着现在前端技术的发展，我们会使用各种框架（Vue、React），ES6模块化语法、Less/Sass等css预处理器，去提高新开发的效率和程序的健壮性。但是对于这些语法和框架我们的浏览器是不能直接运行的，需要使用一些打包工具去将代码进行编译，将其编译成浏览器可以运行的js、css等语法，才能运行。
此外，使用一些打包工具还可以压缩代码、做一些兼容性处理、提升代码的性能等。
webpack有两种开发模式，这两种开发模式的功能是有限的：
打包文件的入口，让webpack知道从按个文件开始打包打包的文件要输出到哪里去，并且如何命名等只能解析js、json等资源，所以在处于其他资源的时候就需要借助loader，webpack才能解析扩展webpack的功能，我们需要下载并且引用它生产模式：production开发模式：deveplopment以上内容来自：
entry 默认值是
./src/index.js，但你可以通过在 webpack configuration 中配置entry属性，来指定一个（或多个）不同的入口起点。
webpack.config.js
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
},
};
也可以简写为：
module.exports = {
entry: './path/to/my/entry/file.js',
};
在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 “chunk” 中时，我们就可以将一个文件路径数组传递给 entry 属性
webpack.config.js
module.exports = {
entry: ['./src/file_1.js', './src/file_2.js'],
output: {
filename: 'bundle.js',
},
};
outputoutput 属性告诉 webpack 在哪里
输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在./dist文件夹中。
webpack.config.js
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'
}
}
上面示例，分别通过output.path和output.filename属性来设置文件输出位置以及输出文件的名称。
webpack
只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
在更高层面，在 webpack 的配置中，loader 有两个属性：
test 属性，识别出哪些文件会被转换。use属性，定义出在进行转换时，应该使用哪个loader注：loader是在module下的rules属性下进行配置
webpack.confis.js
const path = require('path')
module.exports = {
entry: '',
output: {
path: '',
filename: ''
},
module: {
rules: [{
test: '/\.txt$/',
use: 'raw-loader'
}],
},
}
以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。这告诉webpack编译器，当遇到require或者import语句中被解析为 '.txt'的路径时，在对它进行打包前，先use（使用）raw-loader转换一下。
示例一
使用loader告诉webpack加载css文件，或者将TypeScript转为JavaScript。为此首先安装相对应的loader。
npm install --save-dev css-loader ts-loader
然后指示webpack对每个.css使用css-loader，以及对所有的.ts文件使用ts-loader
webpack.config.js
module.exports = {
module: {
relus: [
{test: /\.css$/,use: 'css-loader'},
{test: /\.ts$/,use: 'ts-loader'},
]
}
}
示例二
module.rules允许你在webpack配置中指定多个loader。loader从左到右（或从下到上）的取值执行。在下面示例中，从sass-loader开始执行，将scss/sass文件编译成普通的css文件，然后继续执行css-loader，css-loader会对css文件进行解析处理，最后执行style-loader，style-loader会将css样式嵌入到html中。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
option: {
modules: true // modules: true选项意味着它会将CSS类名转换为唯一的哈希值，这样可以避免在项目中的CSS样式冲突。
}
},
{
loader: 'sass-loader'
}
]
}
]
}
}
loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。想要使用一个插件，只需要
require()它，然后把它添加到plugin数组中，多数插件可以通过选项（option）自定义。你也可以在一个配置文件中因为不同目的的而多次使用同一个插件，这时要通过new操作符来创建一个插件实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。
ProgressPlugin 用于自定义编译过程中的进度报告，HtmlWebpackPlugin 将生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。
通过选择
development，production或none之中的一个，来设置mode参数，你可以启用webpack内置在相应环境下的优化，其默认值为production
module.exports = {
mode: 'production'
}