一、什么是webpack?
webpack 是一个现代 JavaScript 应用程序的静态模块打包器。在 webpack 里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。
二、webpack核心概念
- 入口(entry)
- 概念
指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。 - 配置
//webpack.config.js
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
- 输出(output)
- 概念
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程。 - 配置
在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:
filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
//1、如果只有一个输出文件
filename: 'my-first-webpack.bundle.js'
//2、有多个 Chunk 要输出时,需要借助模版和变量
filename: '[name].js',
}
};
- 加载器(loader)
- 概念
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"load"模块时预处理文件。 - 使用loader
配置(推荐)
//test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
//loader:loader的名称(必须)
//示例: 指示 webpack 对每个 .css 使用 css-loader,以及对所有 .ts 文件使用 ts-loader
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式,并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览:
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
内联
//可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。
import Styles from 'style-loader!css-loader?modules!./styles.css';
CLI
//这会对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader。
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
- 插件(plugins)
- 概念
插件是 webpack 的支柱功能。直接作用于 webpack,扩展了它的功能,目的在于解决 loader 无法实现的其他事。 - 配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const config = {
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
- 模块热替换(hot module replacement)
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容,以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
参考:
- webpack官方文档
- 入门 Webpack,看这篇就够了