webpack安装
- 安装本地的webpack
- npm i webpack webpack-cli -D（线上环境不需要）
webpack可以进行0配置
- webpack是一个打包工具——》输出后的结果是js模块
- 打包（支持js模块化），打包命令：npx webpack
手动配置webpack
- 默认配置文件的名字：webpack.config.js/webpackfile.js。如果修改默认配置文件的名字，可以：npx webpack --config webpack.config.my.js
mode模式
1、webpack.config.js配置：
module.exports = {
mode: 'production', // 模式
}
注： 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
development：开发模式（代码不压缩），会将process.env.NODE_ENV 的值设为 development 。启用NamedChunksPlugin 和 NamedMoudulesPlugin。
production：生产模式（会压缩代码），会将process.env.NODE_ENV 的值设为 production 。启用FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin 和UglifyJsPlugin
入口（entry）
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值./src/index.js，可以在 webpack 的配置文件中配置入口，配置节点为：entry，当然可以配置一个入口，也可以配置多个。
1、单个入口文件
module.exports = {
entry: './src/index.js' //单入口
}
2、多个入口文件
module.exports = {
entry: { //多入口
main: './src/index.js',
other: './src/other.js'
}
}
输出（output）
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
let path = require('path')
module.exports = {
output: {
filename: 'bundle.js', // 打包后的文件名
// filename: 'bundle.[hash:8].js', // 打包后的文件名 加上hash可以防止打包文件覆盖。只显示八位
path: path.resolve(__dirname,'build'), // 路径必须是一个绝对路径
},
}
热部署：webpack-dev-server
webpack-dev-server会通过express(node框架)启动一个http服务。
DevServer用于提供HTTP服务、监听文件变化并实时刷新页面、支持SourceMap以方便调试。
- npm i webpack-dev-server -D
- 启动项目：npx webpack-dev-server
1、webpack.config.js配置：
module.exports = {
//开发服务器配置
devServer: {
port: 3000,//修改端口号
progress: true,//进度条
contentBase: './dist',//默认访问目录
overlay: true,//是否在页面展示错误，（创建脚手架一般都会开启）
hot: true, //热更新
// open: true,//自动打开浏览器
},
}
2、package.json文件配置：open(自动打开)
{
"scripts": {
"dev": "webpack-dev-server --open"
}
}
执行：npm run dev，webpack_dev_server热部署就启动了，部署的服务器地址在localhost:8080/上
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
- 处理样式
当引入css文件，webpack是无法识别的，这就需要使用相应的css插件 | loader。
//css-loader：解析@import这种语法的
//style-loader：把css插入到head的标签中
//loader：特点：单一
//loader：用法：一个loader用字符串，多个loader需要[]；还可以写成对象方式
//loader：顺序：默认从右向左执行，从下到上执行
1、npm i css-loader style-loader -D
2、webpack.config.js配置：
module.exports = {
module: { // 模块
rules: [ // 规则
{
test:/\.css$/,
use: [
{
loader: 'style-loader', // 把css插入到head的标签中
// options: { // 解决行内样式不生效
// insert: function(element) {
// var parent = document.querySelector('head');
// var lastInsertedElement = window._lastElementInsertedByStyleLoader;
// if (!lastInsertedElement) {
// parent.insertBefore(element, parent.firstChild);
// } else if (lastInsertedElement.nextSibling) {
// parent.insertBefore(element, lastInsertedElement.nextSibling)
// } else {
// parent.appendChild(element)
// }
// }
// }
},
'css-loader', // 解析@import
'postcss-loader', // 自动加前缀
]
},
]
}
}
- 解析less
1、npm i less less-loader -D
2、webpack.config.js配置：
module.exports = {
module: { // 模块
rules: [ // 规则
{ // 也可以处理less文件、sass：node-sass、sass-loader;stylus：stylus、stylus-loader
test:/\.less$/,
// loaders: ['style-loader','css-loader','less-loader'] // 方式一
use: [ // 方式二
// {
// loader: 'style-loader',
// options: {
// insert: 'top'
// }
// },
MiniCssExtractPlugin.loader, // 抽离css样式
'css-loader', // @import 解析路径
'less-loader', // 把less->css
'postcss-loader', // 自动加前缀
]
}
]
}
}
- 自动加浏览器前缀
1、npm i postcss-loader autoprefixer -D
2、package.json文件配置：
"browserslist": [
"ie>=8",
"Firefox>=20",
"Safari>=5",
"Android>=4",
"Ios>=6",
"last 4 version"
]
3、package.json同级创建配置文件：postcss.config.js。配置：
module.exports = {
plugins: [require('autoprefixer')]
}
4、webpack.config.js配置：
module.exports = {
module: { // 模块
rules: [ // 规则
{
test: /\.css$/,
use: [
'css-loader',
'postcss-loader'
]
}
]
}
}
https://www.cnblogs.com/roseAT/p/12083210.html
- es6转换成es5：
1、npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D(用来编译类(class))
npm i @babel/plugin-proposal-decorators -D(装饰器@Decorator)
2、webpack.config.js配置：
module.exports = {
module: { // 模块
rules: [ // 规则
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: { // 用babel-loader：把es6->es5
presets: [
'@babel/preset-env'
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
// '@babel/plugin-proposal-class-properties'
]
}
}
},
]
}
}
https://blog.csdn.net/weixin_43664308/article/details/94445978
插件（plugins）
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
- html-webpack-plugin（指定html模板）
1、npm i html-webpack-plugin -D
2、webpack.config.js配置：
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [ // 数组 放着所有的webpack插件
new HtmlWebpackPlugin({ // 模板配置
template: './src/index.html', // 路径
filename: 'index.html', // 打包后的文件名
minify: {
removeAttributeQuotes: true, // 移除index.html文件里的""号。
collapseWhitespace: true, // 折叠空行
},
hash: true, // hash戳：防止浏览器缓存
}),
]
}
- mini-css-extract-plugin（抽离css样式）
1、npm i mini-css-extract-plugin -D
2、webpack.config.js配置：
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
plugins: [ // 数组 放着所有的webpack插件
new MiniCssExtractPlugin({ // 抽离css样式
filename: 'main.css' // 抽离出来的css文件名
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
MiniCssExtractPlugin.loader,
'css-loader'
}
]
}
]
}
}
- optimize-css-assets-webpack-plugin（压缩css）
- uglifyjs-webpack-plugin（压缩js）
1、npm i optimize-css-assets-webpack-plugin -D
1、npm i uglifyjs-webpack-plugin -D
2、webpack.config.js配置：
module.exports = {
optimization: { // 优化项
minimizer: [
new UglifyJsPlugin({ // 压缩js
cache: true, // 缓存
parallel: true, // 并发打包
sourceMap: true, // 源码映射
}),
new OptimizeCss() // 压缩css
]
},
}
- Babel优化：(es6转换es5的高级语法)避免重复引入，公共的地方进行抽离
1、npm i @babel/plugin-transform-runtime -D
1、npm i @babel/runtime
2、webpack.config.js配置：
module.exports = {
module: { // 模块
rules: [ // 规则
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: { // 用babel-loader：把es6->es5
presets: [
'@babel/preset-env'
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
"@babel/plugin-transform-runtime"
]
}
}
},
]
}
}
- 补丁模块：
1、npm i @babel/polyfill
2、需要补丁的js文件中：require('@babel.polyfill')
校验
1、npm i eslint eslint-loader -D
2、webpack.config.js配置：
module.exports = {
module: { // 模块
rules: [ // 规则
{
test: /\.js$/,
use: {
loader: 'eslint-loader',
}
},
]
}
}
