……写在前面的话，希望要入门Webpack的小伙伴第一个就能搜到这篇文章，目前下的最新的版本是5.11.1
我的配置是："webpack": "^4.41.6", "webpack-cli": "^3.3.11","webpack-dev-server": "^3.10.3"
后期学到webpack5，会不断的补充，一起学习吧
安装：
1.初始化项目
npm init
2.全局安装之后可以通过指令来调用
npm i webpack webpack-cli -g
webpack.config.js webpack 配置文件详解
作用：指示webpack 干哪些活 （运行webpack指令，会加载里面的配置）
所有的构建工具都是基于node.js平台运行的~模块化采用commonJs
loader: 1.下载 2.使用（配置loader）
plugins: 1.下载 2.引入 3.使用 npm i html-webpack-plugin -D
打包
- css 打包工具：style-loader、css-loader、less-loader、less
安装方法：npm i '打包工具' -D
注：less打包必须安装less-loader 和 less- html 打包工具：html-webpack-plugin
安装方法：npm i html-webpack-plugin -D
使用：new htmlWebpackPlugin({ template: './src/index.html' })- img图片打包：（待更新）
处理样式中url图片（默认处理不了html中的img图片）下载 url-loader file-loader
处理html文件的img图片：html-loader- 打包其他资源(除了html/js/css以外的资源)
使用：file-loader
优化（css提取，兼容性处理，压缩）
a.提取css成单独文件的插件: mini-css-extract-plugin
用法：const miniCssExtractPlugin = require('mini-css-extract-plugin')
b.压缩css插件: optimize-css-assets-webpack-plugin
用法：const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
c.css兼容性：loader: 'postcss-loader'
注：可能存在兼容性问题
解决：项目根目录下新建一个postcss.config.js文件
postcss.config.js文件
module.exports = {
plugins: [
// postcss插件
require('postcss-preset-env')()
]
}
本地环境配置：devServer
开发服务器 devServer： 自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点： 只会在内存中编译打包，不会有任何输出到本地代码
启动devServer指令：webpack-dev-server
安装：npm i webpack-dev-server -D
本地启动：npx webpack-dev-server
package.json 浏览器配置
package.json 浏览器配置
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
webpack.config.js 文件
/*
webpack.config.js webpack 配置文件
作用：指示webpack 干哪些活 （运行webpack指令，会加载里面的配置）
所有的构建工具都是基于node.js平台运行的~模块化采用commonJs
loader: 1.下载 2.使用（配置loader）
plugins: 1.下载 2.引入 3.使用 npm i html-webpack-plugin -D
*/
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css成单独文件的插件
// mini-css-extract-plugin
const miniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css插件：optimize-css-assets-webpack-plugin
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置 nodeJs 环境变量，方便开发者调试
process.env_NODE_ENV = 'development'
module.exports = {
// webpack配置
// 入口起点
entry: './src/js/index.js',
// 输出
output: {
// 输出文件名
filename: 'js/built.js',
// 输出路径
// __dirname noidejs变量，代表当前文件的目录的绝对路径
path: resolve(__dirname, 'build')
},
// loader 的配置(翻译)
module: {
rules: [
// 详细的loader配置
// 不同文件必须配置不同的loader
{
// 匹配哪些文件
test: /\.css$/,
// 多个loader处理用use
use: [
// use数组中的loader执行顺序： 从右到左，从下到上 依次执行
// 创建style标签，将js中的样式资源插入进去，添加到head中生效
// 'style-loader',
// 取代style-loader，提取js中的css成单独文件
miniCssExtractPlugin.loader,
// 将css文件变成commonJs模块加载js中，里面内容是样式字符串
'css-loader',
{
loader: 'postcss-loader',
// options: {
// indent: 'postcss',
// plugins: () => [
// // postcss的插件
// require('postcss-preset-env')()
// ]
// }
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 需要下载 less-loader 和 less
'less-loader'
]
},
{
// 处理图片,样式中url图片
// 问题：默认处理不了html中的img图片
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理
// 优势： 减少请求（减轻服务器压力）
// 缺点： 图片体积会增大（文件请求更慢）
limit: 5 * 1024,
// 问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonJs
// 解析出现: [object Module]
// 解决：关闭url-loader的es6模块化，使用commonJs解析
// esModule: false,
// 给图片重命名
// [hash:10] 取图片的hash的前十位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而被url-loader进行处理）
loader: 'html-loader',
},
// 打包其他资源(除了html/js/css以外的资源)
{
exclude: /\.(css|less|js|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
// plugins 插件配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能：默认会创建一个 html 文件，引入打包输出的所有资源（js/css）
// 需求： 需要有结构的html文件
new htmlWebpackPlugin({
// 复制一个 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
template: './src/index.html'
}),
new miniCssExtractPlugin({
//对输出的css文件进行重命名
filename: 'css/built.css'
}),
// 压缩css
new optimizeCssAssetsWebpackPlugin()
],
mode: 'development', // 开发模式
// mode: "production"
// 开发服务器 devServer： 自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点： 只会在内存中编译打包，不会有任何输出到本地代码
// 启动devServer指令：webpack-dev-server
// 安装：npm i webpack-dev-server -D
// 本地启动：npx webpack-dev-server
devServer: {
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 默认打开浏览器
open: true
},
}
