关键点
- webpack配置详解
- entry
- output
一. entry(入口配置)
项目很多文件之间的关系是需要我们牵线搭桥, 然后让webpack去处理; 一般项目会存在一个或者多个'主文件', 其他文件(模块)直接或者间接关联到主文件. 那么entry就是配置配置主文件信息.
entry赋值语法:
- 字符串 | 数组
const config = {
entry: '/path/to/my/entry/file.js'
};
module.exports = config;
简写方式:
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
- 对象
常见场景: 配置多页应用, 或者抽出公共模块代码, 需要对象语法形式.
entry:{
main:'./src/index.js',
second:'./src/index2.js',
vendor: ['react', 'react-dom']
}
二.输出配置(output)
output 配置项作用于打包文件的输出阶段.
- 基本配置, filename和path
- filename用于输出文件的名
- path设置输出路径
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
- chunkfile
在程序刚进入时,可能不需要某个主文件的所有代码,这时我们使用一定方法对主文件代码进行分割,如此,可以按需加载;这种不具备独立依赖的文件称为chunkfile
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: 'js/[name].chunk.js'
}
注释: [name]为webpack中占位符,表示打包后文件的名称,可以在entry or 代码中设置(webpack还有其他占位符)
三.modules
开发者在模块化编程中,将程序分解成离散功能块,称为模块.
对于webpack而言,所有的文件都是模块.
-
webpack 模块
对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：- ES2015 import 语句
- CommonJS require() 语句
- AMD define 和 require 语句
- css/sass/less 文件中的 @import 语句。
- 样式(url(...))或 HTML 文件(
<img src=...>)中的图片链接(image url)
loader
webpack只能处理 js 文件, 对于一些js新语法,或者其他类型的模块,应该如何处理,这时需要webpack又一重要部分loader.
webpack 中，loader 的配置主要在module.rules 中进行
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
}
- plugins 的配置
一切loader 不能做的处理都可由plugins 来做
[待续持续更新吧]
