Webpack 笔记
Webpack 笔记
安装
npm i -D webpack
概念
- entry:入口
- output:输出
- loader:处理非JavaScript文件的转换器,导入任何类型的文件/模块
- plugins:插件,例如可以打包优化和压缩
- mode:模式,设置
mode: development
或mode: production
思想
配置
文件 webpack.config.js
module.exports = {
// 配置模块入口
entry: './main.js',
// 输出文件配置
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
},
// 配置处理模块的规则
module: {
rules: {
test: /\.css$/,
use: ['style-loader', 'css-loader'], // loader
}
},
// 配置模块寻找文件的规则
resolve: {},
// 插件 扩展功能
plugins: [],
// DevServer 的配置,当使用 DevServer 启动 Webpack 时,此项配置可生效
devServer: {},
// 其他配置
// 构建针对不同运行环境的代码
target: 'web', // web | node | ...
// 配置如何生成 Source Map
devtool: 'source-map',
// 监听文件更新
watch: true, // 使用 DevServer 时,监听模式默认开启
// 监听模式配置
watchOptions: {},
//
}
Entry
入口
// string | Array<string> | Object
entry: './app/entry' // string
entry: ['./app/entry1', './app/entry2'] // array<string>
// 前两者生成一个Chunk,名为main
entry: {a: './app/entry-a', b: './app/entry-b'} // object
// object生成多个Chunk,名称为对象的键
// 动态配置
// 若项目中有多个页面,需为每个页面入口配置entry,不能使用静态值则可设置动态值
// 同步函数
entry: () => {
return {
a: './pages/a',
b: './pages/b',
}
};
// 异步函数
entry: ()=> new Promise((resolve)=>{
resolve({
a: './pages/a',
b: './pages/b',
});
});
Output
-
output.filename
输出文件的名称 string
若有多个chuck,则使用模板与变量
output.filename = '[name]_[hash].js' // '[hash:8].js' // hash 默认20位
-
output.path
输出文件存放在本地的目录,必须是绝对路径
output.path = path.resolve(__dirname, 'dist')
Module
配置处理模块的规则
modules.rules
配置模块的读取和解析规则 Array<Object>
- 条件匹配:test、include、exclude
- 应用规则:对选中文件使用Loader
modules.rules = [
{
test: /\.scss$/, // 正则表达式匹配文件名称
use: ['style-loader','css-loader','sass-loader'], // 从后到前对文件使用Loader
// 单个Loader可用rules[].loader = 'xx-loader'
// 向loader传参:1.'xx-loader?params' 2.使用对象
exclude: path.resolve(__dirname, 'node_modules'), // 排除node_modules目录下的文件
// test、exclude、include可用类型:String|Reg|[Reg]|String
}
]
modules.noParse
忽略对部分没采用模块化的文件的递归解析和处理
// RegExp|[RegExp]|function
noParse: /jquery|chartjs/ // 正则表达式
noParse: (content)=>{
// content 代表一个模块的文件路径
// 返回 true 或 false
return /jquery|chartjs/.test(contest);
}
Resolve
寻找模块对应文件的规则
{
// 配置别名将原导入路径映射成新的导入路径
resolve.alias: {
components: './src/components',
// 将 import Btn from 'components/button' 替换为
// import Btn from './src/components/button'
'react$': '/path/to/react.min.js',
// 缩小匹配范围,将 import 'react' 替换为 import '/path/to/react.min.js'
},
// 导入文件无后缀时,将带上后缀自动查找,使Webpack依次找 xx、xx.js、xx.json
resolve.extentsions: ['.js', '.json'],
// 所有导入语句必须带文件后缀
resolve.enforceExtension: true,
// node_modules 中的文件需带文件后缀,为兼容第三方模块,可设false
resolve.enforceModuleExtension: false,
}
DevServer
我们的需要:
- 提供http服务
- 监听文件变化自动刷新
安装
npm i -D webpack-dev-server
运行
webpack-dev-server
配置
// 代理
devServer.proxy
// 模块热替换功能
devServer.hot: true ,
// 在页面中注入代理客户端,负责网页刷新
devServer.inline: true,
// 要求命中任意路由时均返回 index.html,只适用于单html应用,若由多个单页组成可参考设置
devServer.historyApiFallback: true,
// 服务器的文件根目录
devServer.contentBase: path.join(__dirname, 'public') | false /*关闭暴露本地文件*/ ,
// 在响应中注入响应头
devServer.headers: {'X-foo': 'bar'},
// 服务监听地址,默认 127.0.0.1 只可本地访问
devServer.host: '0.0.0.0', // 是局域网内可访问
//
devServer.allowedHosts: []
//
devServer.disabeHostCheck
// 使用https服务
devServer.https: true | object
//
devServer.clientLogLevel
// 是否启用Gzip压缩
devServer.compress: true | false,
// 自动打开网页
devServer.open
实战
支持 ES6
使用Babel将ES6转换为ES5语法
.babelrc
babel 的配置文件
{
"plugins":[], // babel 采用的插件
"presets":[], // babel 采用的语法
}
使用
安装
npm i -D babel-loader
# 其余可按提示按需要安装
webpack配置
resolve.extensions = ['.ts', '.js']
module.rules = [{
test: /\.js$/,
user: ['babel-loader'],
}]
支持TypeScript
tsconfig.json
typescript的配置文件
使用
安装
npm i -D typescript awesome-typescript-loader
webpack配置
// webpack.config.js
module.rules=[{
test:/\.ts$/,
loader: 'awesome-typescript-loader',
}]
支持SCSS、Less
安装
# SCSS
npm i -D sass-loader css-loader style-loader
npm i -D node-sass
# Less
npm i -D less
npm i -D style-loader css-loader less-loader
webpack配置
// SCSS
module.rules = [{
test: /\.scss/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}]
// less
module.rules = [{
test: /\.scss/,
use: ['style-loader', 'css-loader', 'less-loader'],
}]
支持React
1. React 与 Babel
-
安装
npm i -D react react-dom npm i -D babel-preset-react
-
babel配置,增加
{ "preset": [ "react" ] }
2. React 与 TypeScript
-
安装
npm i -D react react-dom @types/react @types/react-dom
-
配置 tsconfig.json
// 增加 { "conpilerOptions": { "jsx": "react" } }
-
配置 Webpack
module.rules = [{ test: /\.tsx$/, loader: 'awesome-typescript-loader', }]
支持Vue
1. Vue 与 babel
安装
npm i -S vue
npm i -D vue-loader css-loader vue-template-compiler
webpack配置
module.rules = [{
test: /\.vue$/,
loader: 'vue-loader',
}]
2. Vue 与 TypeScript
安装
npm i -D ts-loader typescript
tsconfig.json 配置
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node"
}
}
Loader
具有文件转换功能。将文件看做模块