一、webpack安装
全局安装：npm i webpack webpack-cli -g
本地安装：npm i webpack webpack-cli -D
二、webpack使用和配置：
1、新建项目名称--根目录新建src目录、build目录、webpack.config.js；
2、src目录新建index.js文件
3、项目根目录执行 npm init 初始化项目；
4、根目录安装 npm i webpack webpack-cli -D
5、在webpack.config.js进行webpack 配置：（不是固定的、可根据不同需求增删相应配置）
const {
resolve
} = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin'); //解析编译html文件
const miniCssExtractPlugin = require('mini-css-extract-plugin'); //提取css样式文件为单独的文件，减少打包后js代码体积
const {
loader
} = require('mini-css-extract-plugin');
const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css文件
const commCssLoader = [
// 'style-loader',//创建style标签，放入样式，就是行内样式
miniCssExtractPlugin.loader, //取代style-loader 到提取js中css代码为单独文件
'css-loader', //编译css文件 将css文件整合到js文件中
/*
css的兼容性处理：postcss-loader postcss-preset-env
帮助 postcss找到package.json中browserslist里面的配置，通过匹配加载指定的css兼容性样式
*/
{ //修改配置 使用postcss-loader默认配置,需要修改配置按照以下去写
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
//postcss的插件
require('postcss-preset-env')()
]
}
}
];
// process.env.NODE_ENV = 'development'; //设置nodejs环境变量 node默认是生产环境 这个和下面的mode无关
module.exports = {
//入口起点
entry: './src/index.js',
//输出
output: {
publicPath: "/",
filename: 'js/[name].js', //输出文件名
path: resolve(__dirname, 'build') //输出路径 __dirname 是node.js 文件变量 代表当前文件目录绝对路径
},
// loader的配置，用于对模块的源代码进行转换, 可以使你在 import 或 "load(加载)" 模块时预处理文件
module: {
// 详细loader的配置，不同的文件需要配置不同的loader
rules: [
//处理css
{
test: /\.css$/,
use: [...commCssLoader]
},
//处理less
{
test: /\.less$/,
use: [
...commCssLoader,
'less-loader'
]
},
// 处理css里面图片：需要安装：url-loader 和 file-loader；问题：默认无法处理html中的img图片
{
test: /\.(jpg|png|gif)$/, //处理jpg|png|gif等类型格式的图片
loader: 'url-loader', //使用一个loader也可以这样写，不要use,直接：loader:'url-loader
options: {
limit: 20 * 1024, //8*1024是指图片大小小于8kb,就会被转换base64处理，转换base64优点：减少请求次数，减轻服务器压力，缺点：图片体积会更大
esModule: false, // 解决：关闭url-loader的es6模块化，使用commonjs解析，否则图片无法正常解析
name: '[hash:10].[ext]', //给编译后的图片重命名--这个配置不是必要的
outputPath: 'img' //配置输入到指定目录名称
}
},
//处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
{
test: /\.html$/, //需要安装 html-loader
loader: 'html-loader', //处理html文件中img图片，（负责引入img，从而可以被url-loader进行处理）
options: {
esModule: false
}
},
// 处理其他资源，即：除了 js/img/html/css
{
// exclude: /\.(css|js|less|html|img|png|scss)$/, //exclude排除法
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
outputPath: 'icon'
}
},
//对js兼容性处理 安装插件：cnpm i babel-loader core-js @babel/preset-env -D
{
test: /\.js$/,
exclude: /node_modules/, //排除node_modules
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: "entry", //按需加载
corejs: 3,
//targets指定兼容性做到那个版本
targets: {
chrome: '60',
firefox: '60',
safari: '10',
ie: '8',
edge: "17"
}
}
]
],
cacheDirectory: true //开启bable缓存
}
}
]
},
optimization: {
splitChunks: {
chunks: "all"
}
},
//plugins的配置，里面写所有用到的插件配置
plugins: [
// 详细plugins的配置
/*
解析编译html需要下载:
1、执行C安装 html-webpack-plugin,
2、引入const htmlWebpackPlugin require('html-webpack-plugin');
3、plugins里面 new htmlWebpackPlugin()；
作用：html-webpack-plugin功能：默认会创建一个空的HTML文件，自动引入打包输出的所有（JS/CSS)
*/
new htmlWebpackPlugin({
template: './src/test.html' //html文件作为模板，自动引入打包输出的所有（JS/CSS)
}),
new miniCssExtractPlugin({
filename: 'css/built.css' //输出文件名
// filename: 'css/built.[contenthash:10].css' //[contenthash:10]加哈希值 解决文件缓存后不更新
}),
new optimizeCssAssetsWebpackPlugin(),
new webpack.DllReferencePlugin({ //告诉webpack哪些库不参与打包
context: __dirname,
manifest: resolve(__dirname, 'dll/manifest.json')
}),
new addAssetHtmlWebpackPlugin({ //将dll已经打包过的文件自动引入
filepath: resolve(__dirname, 'dll/vendors.js')
})
],
//环境模式
mode: 'development',
// mode: 'production', //默认
//开发环境配置
/*
安装依赖:webpack-dev-server
开发服务器配置 devServer用来自动化（自动编译，自动打包，自动打开浏览器 自动刷新浏览器）
启动devServer指令：webpack版本5.0+就执行：webpack serve ；小于5.0就执行：npx webpack-dev-server
*/
target: "web",
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true, //启动zip压缩
port: 6688,
open: false, //true自动打开默认浏览器
hot: true //热模块替换，只更新相应修改过的模块 提高打包速度
},
devtool: 'eval-cheap-module-source-map'
}
网友评论