webpack基本配置
webpack是什么
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。所有的构建工具都是基于node.js平台运行，模块化默认采用commonjs。
webpack安装/初始化配置
1.安装webpack
（-D 安装开发依赖）
2.初始化package.json
npm init
webpack配置文件
1、webpack可以处理js，json文件，不能处理其他文件
2、生产环境比开发环境多一个压缩js代码
3、生产环境和开发环境可将ES6模块编译成浏览器能识别的模块
/*webpack.config.js*/
//resolve用来拼接绝对路径的方法
const {resolve} = require('path');
module.exports = {
entry: './src/js/index.js', //入口文件，webpack从这里开始打包
output: {
filename: 'build.js', //输出文件名
path: resolve(__dirname, 'build') //输出路径，一般采用绝对路径
//__dirname nodejs的变量，代表当前文件目录的绝对路径
},
//loader处理那些非JavaScript文件
module: {
rules:[
//详细loader配置，不同文件配置不同loader
]
},
plugins: [
//插件，执行更大更复杂的任务
],
//打包模式
mode: 'development' //development:开发环境，production:生产环境
HTML配置
/*
loader:1、下载 2、使用（配置loader）
plugins：1、下载 2、引入 3、使用
*/
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/index.js',
output:{
filename:'build.js',
path:resolve(__dirname, 'build')
},
module:{
rules:[
]
},
plugins:[
//html-webpack-plugin
//功能：默认创建一个空的HTML，自动引入打包输出的所有资源（JS/Css）
//需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制./src/index.html文件，并自动引入打包输出的所有资源
template: './src/index.html',
// 压缩html
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true,
},
}
)
],
mode: 'development'
}
CSS配置
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 复用loader
/*css兼容性处理：postcss-->postcss-loader postcss-preset-env
(package.josn)
"browserslist": {
//开发环境-->设置node环境变量：process.env.NODE_ENV = development
"development": [
"last 1 chrome version", 兼容最近版本的浏览器
"last 1 firefox version",
"last 1 safari version"
],
//生产环境，默认看生产环境
"production": [
">0.2%", 兼容99.8%的浏览器
"not dead", 不要已死的浏览器
"not op_mini all" 不要op_mini
]
}
帮postcss找到package.josn中browserslist里面的配置，通过配置加载指定的css兼容性格式
*/
// 使用loader的默认配置 ‘postcss-loader’
const commonCssLoader = [
MiniCssExtractPlugin.loader,//取代style-loader，提取js中的css成单独文件
'css-loader', //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
{
// 还需在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
require('postcss-preset-env')();
},
},
},
]
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/build.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
// use数组中执行顺序：从右到左、从下到上依次执行
// 'style-loader',创建style标签，将js中的样式资源插入进行，添加到head中生效
...commonCssLoader
],
},
{
test: /\.less$/,
use: [
...commonCssLoader,
'less-loader',// 将less文件编译成css文件
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/build.css',
}),
new OptimizeCssAssetsWebpackPlugin(),// 压缩css
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
}
js配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/build.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
/*
语法检查： eslint-loader eslint
只检查自己写的源代码，不检查第三方库
设置检查规则：
package.josn中 eslintConfig中设置
推荐使用airbnb规则
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复
fix: true,
},
},
/*
js兼容性处理：babel-loader @babel/preset-env @babel/core
1.基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，promise等高级语法无法转换
2.全部js兼容性处理 --> @babel/polyfill 文件中导入即可
问题：只需解决部分兼容性问题。但是将所有兼容性代码全部引入，体积过大
3、需要做兼容性处理就做：按需加载 --> core-js
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets:{
chrome: '60',
firefox: '60',
ie: '9',
edge: '17',
safari: '10'
}
}
]
],
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
mode: 'production', // 生产环境下会自动压缩js代码
};
图片处理
const HtmlWebpackPlugon = require('html-webpack-plugin')
module.exports = {
entry:'./src/index.js',
output:{
filename:'build.js',
path:`${__dirname}/build`
},
module:{
rules:[
{
test:/\.less$/,
//使用多个loader用use
use:[
'style-loader',
'css-loader',
'less-loader'
]
},{
//处理图片资源
// 问题：默认处理不了HTML中img图片
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会变大（文件请求速度更慢）
limit: 8 * 1024,
// esModule:false 关闭es6模块化，使用commonjs解析
// 给图片进行重命名
// [hash：10]：取图片的hash的前十位
// [ext]取文件原来的扩展名
name:'[hash:10].[ext]'
}
},
{
test:/\.html$/,
// 处理HTML文件的img图片（负责引入img，从而能被url-loader处理）
loader:'html-loader'
}
]
},
plugins:[
new HtmlWebpackPlugon({
template:'./src/index.html'
})
],
mode:'development'
}
其他资源
const { resolve } = require('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve( __dirname, 'build' )
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//打包其他资源(除了html/css/js以外的资源)
{
// 排除html/css/js资源
exclude:/\.(css|js|html|jpg|png|gif)$/,//url-loader也可以用
loader:'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
devServer自动打包编译
const { resolve } = require('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve( __dirname, 'build' )
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//打包其他资源(除了html/css/js以外的资源)
{
// 排除html/css/js资源
exclude:/\.(css|js|html)$/,//url-loader也可以用
loader:'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
//开发服务器devsever：用来自动编译，自动打开浏览器，自动刷新浏览器
// 特点：只会在内存中编译打包，不会有任何输出（不会生成build文件夹）
// 启动devserver指令为：npx webpack-dev-server
devServer: {
// 构建后的项目路径
contentBase: resolve(__dirname,'build'),
//启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
}
开发环境配置
/*
开发环境配置：代码可运行
运行指令：
webpack 会将打包结果输出
npx webpack-dev-server 只会在内存中编译打包，没有输出
*/
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname, 'build')
},
module:{
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test:/\.css$/,
use: ['style-loader', 'css-loader']
},
{
test:/\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
linit: 8*1024,
name:'[hash:10].[ext]',
exModule: false//关闭es6模块化
},
// outputPath:'img' 输出到build/img文件夹
},
{
//处理html中的img
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(html|css|js|jpg|png|gif|less)$/,
loader:'file-loader',
options: {
name:'[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true, //优化
port: 3000,
open: true
},
}
生产环境配置
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义node环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader', {
// 还需在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
require('postcss-preset-env')();
},
},
},
]
/*
正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
先执行eslint再执行babel
*/
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/build.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
...commonCssLoader
],
},
{
test: /\.less$/,
use: [
...commonCssLoader,
'less-loader',
],
},
{
// 在package.josn中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_module/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 在package.josn中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_module/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50',
},
},
],
],
}
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)$/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/build.css',
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
【此文为 尚硅谷2020最新版Webpack5实战教程(从入门到精通) 笔记】
