webpack基本使用
第一步：
1.初始化项目
npm init
2.安装依赖包(-D 开发环境 -S 生产环境)
npm install webpack webpack-cli -D
3.创建webpack.config.js配置文件
"build": "webpack --config webpack.config.js"
配置webpack配置
运行webpack配置，进行打包
npm run build
4.配置entry入口文件，output出口文件以及mode打包后的文件格式
5.配置自动html文件的插件
npm install html-webpack-plugin -D
//引入自动生成html的插件
const HtmlWebpackPlugin=require('html-webpack-plugin');
new HtmlWebpackPlugin({template:'./public/index.html'})
5.2自动删除打包编译后的旧dist文件
npm install clean-webpack-plugin -D
//引入自动清楚dist的插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
//自动清除dist的插件
new CleanWebpackPlugin(),
等价于webpack5
output: {
clean: true,
},
6.由于webpack只能处理js，json文件，所以需要引入第三方包，打包处理其他文件；webpack
处理css文件,
npm install style-loader css-loader -D
7.处理less文件,把less文件编译成css文件
npm install less less-loader -D
8.处理scss文件，把scss文件编译成css文件
npm install sass sass-loader -D
9.分离css文件
npm install mini-css-extract-plugin -D
引入分离 css 文件的模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//分离css的插件，定义打包好的文件的存放路径和文件名称
new MiniCssExtractPlugin({filename: './css/bundle.[name].css'})
10.处理图片， url-loader 中部分功能要用到file-loader
npm install url-loader file-loader -D
webpack5 之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，
webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。
webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。
asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现
11.配置对于高版本js的兼容性处理
npm install -D babel-loader @babel/core @babel/preset-env
12.webpack-dev-server自动刷新
npm install webpack-dev-server -D
13.使用webpack-merge工具对拆分后的webpack.config.js文件进行合并
npm install webpack-merge -D
拆分webpack.config.js
--config 存放配置文件的文件夹
webpack.base.js 公共配置
webpack.dev.js 开发环境配置
webpack.pro.js 生产环境配置
第二步：引入一些第三方包
1.引入jquery包
npm install jquery -S
使用jquery
const $=require('jquery')
webpack.config.js
// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
const path=require('path');
//引入自动生成html的插件
const HtmlWebpackPlugin=require('html-webpack-plugin');
//引入自动清楚dist的插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
//引入分离 css 文件的模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports={
//1.入口entry,从那个文件开始打包
entry:"./src/main.js",
//2.出口output，打包到哪里去
output:{
//打包输出的目录
path:path.resolve(__dirname,'dist'),
//打包后生成的文件名
filename:'js/bundle.[name].js',
},
//3.模式mode development 未压缩 production 已压缩
mode:'development',
//4.配置module模块加载规则
module:{
rules:[
{
//正则表达式，匹配所有以.css结尾的文件
test:/\.css$/,
//实际处理顺序：从右向左
//css-loader 让webpack能够识别解析 css 文件
//style-loader 通过动态的创建style标签的方式(通过js方式)，让解析后的css内容，能够作用到页面中
//MiniCssExtractPlugin.loader 让css样式代码分离开，通过link引入css文件，作用到页面中
use:[{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},'css-loader'],
},
{
//正则表达式，匹配所有以.less结尾的文件
test:/\.less$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
}, 'css-loader', 'less-loader'],
},
{
//正则表达式，匹配所有以.scss结尾的文件
test:/\.scss$/,
use:[{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},'css-loader','sass-loader']
},
{
//正则表达式，匹配所有以.jpg|.png|.gif结尾的文件
test:/\.(png|jpg|gif)$/i,
type: 'asset/resource',
generator:{
//geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
filename:"images/[name].[hash][ext][query]" //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
}
},
//配置对于高版本js的兼容性处理
{
test: /\.js$/,
//忽略的文件
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
//5.配置插件
plugins:[
//自动生成html的插件
new HtmlWebpackPlugin({template:'./public/index.html'}),
//自动清除dist的插件
new CleanWebpackPlugin(),
//分离css的插件，定义打包好的文件的存放路径和文件名称
new MiniCssExtractPlugin({filename: './css/bundle.[name].css'})
],
//配置开发服务器
devServer:{
host:'127.0.0.1',
port: 9595,
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
open:true,
proxy:{
[process.env.VUE_APP_BASE_API]:{
target:'http://localhost:9595',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '',
},
}
}
}
}
|