webpack的理解，vue.config.js文件各個部分的含義

webpack是一個現代javascript應用程序的靜態模塊打包器

• 語法轉換。less/sass/stylus轉換為css，ES5轉換為ES%，……；
• html.css.js代碼壓縮合並（打包）；
• webpack可以在開發期間提供一個開發環境。自動打開瀏覽器，保存時自動刷新；
• 項目一般先打包在上線。開發用，上線不用，npm install 包名字 -D

 

vue.config.js

const path = require('path')

//引入自動生成的html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//引入分離css文件的模塊
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//導入清除插件，可以在每次打包之前清除dist目錄的內容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack-dev-server 相關配置,需要將配置的對象到處，給webpack使用
module.exports = {
　　//入口entry，從哪個文件開始打包
　　entry: './src/main.js',
　　//出口output，打包到哪里去
　　output:{
　　　　//打包輸出的目錄（輸出的目錄必須是一個絕對路徑）
　　　　path:path.join(__dirname,'dist'),
　　　　//打包后生成的文件名
　　　　filename:'js/bundle.js'
　　},
　　//模式mode development未壓縮的，production壓縮
　　mode:'development',

　　//配置module模塊加載規則
 27　　 //默認，webpack只認識json,js，
　　module:{
　　　　rules:[
 30　　　　 //（1）配置css文件的解析
 31　　　　 {
　　　　　　//匹配所有以css結尾的文件，正則
 33　　　　　　 test:/\.css$/,
　　　　　　//css-loader讓webpack能夠識別css文件
　　　　　　//style-loader通過動態創建style標簽的方式讓解析后的css內容，能夠作用到頁面中
　　　　　　use:[{
　　　　　　　　loader:MiniCssExtractPlugin.loader,
　　　　　　　　options:{
　　　　　　　　　　//公共資源加載的路徑
 40　　　　　　　　　　 publicPath:'../',
　　　　　　　　　　//https://www.bilibili.com/video/BV1vJ411E7rn?p=6
 42　　　　　　　　 }
 43　　　　　　 },'css-loader'],

　　
　　　　},
　　　　//（2）配置less文件的解析
　　　　{
　　　　　　test:/\.less$/,
 50　　　　　　 //use中從后往前作用,less轉換為css,css轉換為webpack可識別
　　　　　　// use:['style-loader','css-loader','less-loader']
　　　　　　use:[{
　　　　　　　　loader:MiniCssExtractPlugin.loader,
　　　　　　　　options:{
　　　　　　　　　　//公共資源加載的路徑
　　　　　　　　　　publicPath:'../',

　　　　　　　　}
　　　　　　},'css-loader','less-loader']
　　　　},
　　　　//（3）配置圖片文件的解析
　　　　{
　　　　　　test:/\.(png|jpg|gif)$/i,
　　　　　　use:[
　　　　　　　　//url-loader如果不配置，默認都會將文件轉換為base64字符串的格式
　　　　　　{
　　　　　　　　loader:'url-loader',
　　　　　　　　//8K以內轉換為base64，8k以外，單獨的一個文件請求
　　　　　　　　options:{
　　　　　　　　　　limit:8*1024,
　　　　　　　　　　//配置輸出的文件名
　　　　　　　　　　name: '[name].[ext]',
　　　　　　　　　　//配置靜態資源的引用路徑
　　　　　　　　　　publicPath:'../images/',
　　　　　　　　　　//配置輸出的文件目錄
　　　　　　　　　　outputPath:"images/"

　　　　　　　　}
　　　　　　}
 80　　　　　　 ]
　　　　},
　　　　//（4）配置高版本js兼容性處理
　　　　{
　　　　　　test:/\.js$/,
　　　　　　//exclude為配置排除項
　　　　　　exclude:/(node_modules)/,
 87　　　　　　 use:{
 88　　　　 　　　　loader:'babel-loader',
　　　　　　　　options:{
　　　　　　　　　　presets:['@babel/preset-env']
　　　　　　　　}
　　　　　}
　　}]
},

//配置插件
plugin:[
　　//自動生成html的插件
　　new HtmlWebpackPlugin({template: './src/view/index.html'}),
　　//分離css的插件，定義打包好的文件的存放路徑和文件名
　　new MiniCssExtractPlugin({
　　　　filename:'css/index.css'
　　}),
　　//清除dist目錄的插件
　　new CleanWebpackPlugin()
],
//配置開發服務器
devServer: {
　　port:3000,
　　open:true,
}

}