一,webpack基础
概念,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具*。当 webpack 处理应用程序时,它会在内部构建一个 相互依赖图,此依赖图对应映射到项目所需的每个模块,并生成一个或多个 *bundle
核心概念主要是以下几个方面:
入口起点(entry),通俗说就是webpack是从那个文件开始的配置方法
1
2
3module.exports = {
entry: './path/to/my/entry/file.js'
};输出(output),就是说通过webpack打包后输出文件放在什么位置,怎么命名
1
2
3
4
5
6
7
8
9const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};模块加载器(loader),webpack默认只能解析js和json文件,通过各种各样的loader解析器,webpack就可以处理相应的其它类型文件,供应用程序使用,loader有两个属性,test是匹配文件规则,use对于规则使用的加载器
1
2
3
4
5
6
7
8
9
10
11
12const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};插件(plugin),可以执行更复杂的任务,例如,打包优化,资源管理,注入环境变量等
1
2
3
4
5
6
7
8
9
10
11
12
13const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};模式(mode),通过选择
development
,production
或none
之中的一个,来设置mode
参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为production
1
2
3module.exports = {
mode: 'production'
};
二,常用配置
1 | const path = require('path'); |