Entry用于指定webpack打包的入口
module.exports = {entry: './src/index.js'
}
module.exports = {entry:{app: './app.js',adminApp: './src/adminApp.js'}
}
output用来告诉webpack如何将编译后的文件输出到磁盘
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist'}
}
module.exports = {entry:{app: './app.js',adminApp: './src/adminApp.js'},output: {filename: '[name].js', // 通过占位符确保文件名的唯一path: __dirname + '/dist'}
}
webpack默认只支持js和json两种文件类型,通过loaders去支持其他文件类型并且把他们转化成有效的模块,并且可以添加到依赖图中。
本身是一个函数,接受源文件作为参数,返回转换的结果。
名称 | 描述 |
---|---|
babel-loader | 转换ES6、ES7等JS新特性语法 |
css-loader | 支持.css文件的加载和解析 |
less-loader | 将less转换为css |
ts-loader | 将TS转换成JS |
file-loader | 进行图片、字体的打包 |
raw-loader | 将文件以字符串的形式导入 |
thread-loader | 多进程打包JS和CSS |
module:{rules: [{test: /\.txt$/, // test:指定匹配规则use: 'raw-loader' // use:指定使用的loader名称}]
}
插件用于bundle文件的优化,资源管理和环境变量注入
作用于整个构建过程
名称 | 描述 |
---|---|
CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js |
CleanWebpackPlugin | 清理构建目录 |
ExtractTextWebpackPlugin | 将css从bundle文件里提取成一个独立的css文件 |
CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
HtmlWebpackPlugin | 创建html文件去承载输出的bundle |
UglifyjsWebpackPlugin | 压缩JS |
ZipWebpackPlugin | 将打包的资源输出生成一个zip包 |
plugins:[new HtmlWebpackPlugin({ // 放到plugins数组里template: './src/index.html'})
]
mode用来指定当前的构建环境是:production、develoment还是node
设置mode可以使用webpack内置的函数,默认值为production
选项 | 描述 |
---|---|
development | 设置 process.env.NODE_ENV 的值为 development.开启 NamedChunksPlugin 和 NamedModulesPlugin . |
production | 设置 process.env.NODE_ENV 的值为 production.开启 FlagDependencyUsagePlugin , FlagInclu dedChunksPlugin ModuleConcatenationPlugin , NoEmitOnE rrorsPlugin , Occurrence0rderPlugin ,SideEffectsFl agPlugin 和 TerserPlugin . |
none | 不开启任何优化选项 |
babel的配置文件是:.babelrc
(1)安装
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i react react-dom
(2)增加ES6的babel preset配置 (.babelrc)
{"presets": ["@babel/preset-env","@babel/preset-react"]
}
(3)新增文件reactTest.js
'use strict';
import React from "react";
import ReactDOM from "react-dom";class ReactComponents extends React.Component {render() {return Hello React;}
}ReactDOM.render( ,document.getElementById('root')
)
(4) 修改webpack.config.js
'use strict'const path = require('path');module.exports = {entry: {main: './src/index.js',reactTest: './src/reactTest.js'},output: {path: path.join(__dirname, 'dist'),filename: '[name].js'},mode: 'production',module: {rules: [{test: /\.js$/,use: 'babel-loader'}]}}
css-loader用于加载.css文件,并且转换成commonjs对象
style-loader将样式通过