要求上線的**穩定（js，css的相容處理），執行速度塊（將css改為單獨檔案用link引入），傳輸速度塊（**壓縮）
mini-css-extract-plugin將取代style-loader，作用：提取js中的css**為單獨檔案（乙個），防止html太大，所以弊端就是css檔案太大了（如果是單入口，所以vue中用了自己的vue-style-loader來防止css全部聚焦在一起）
const = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const minics***tractplugin = require('mini-css-extract-plugin');
module.exports = ,
module: ]},
plugins: [
new htmlwebpackplugin(),
new minics***tractplugin()
],mode: 'development'
};
postcss-preset-env：允許您將現代css轉換為大多數瀏覽器都能理解的內容，並根據目標瀏覽器或執行時環境確定所需的指令碼。（並且會去找package.json中browserslist裡面的配置）
const = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const minics***tractplugin = require('mini-css-extract-plugin');
// 設定nodejs環境變數
// process.env.node_env = 'development';
module.exports = ,
module: }]
}]
},plugins: [
new htmlwebpackplugin(),
new minics***tractplugin()
],mode: 'development'
};
"browserslist":const optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin')
plugins:[
// 壓縮css
new optimizecssassetswebpackplugin()
]
注意：只檢查自己寫的源**，第三方的庫是不用檢查的
package.json中eslintconfig中設定~
"eslintconfig":module: }]
},
問題：只能轉換基本語法，如promise高階語法不能轉換
問題：我只要解決部分相容性問題，但是將所有相容性**全部引入，體積太大了~
module: ,
// 指定相容性做到哪個版本瀏覽器
targets: }]
]}}]
},
// 生產環境下會自動壓縮js**
mode: 'production'
plugins: [
new htmlwebpackplugin(
})],
// 定義環境變數
new defineplugin(
}),
const = require('path');
const minics***tractplugin = require('mini-css-extract-plugin'); //提取css為單獨檔案
const optimizecssassetswebpackplugin = require('optimize-css-assets-webpack-plugin'); // 壓縮css
const htmlwebpackplugin = require('html-webpack-plugin');
// 定義nodejs環境變數：決定使用browserslist的哪個環境
process.env.node_env = 'production';
// 復用loader
const commoncssloader = [
// 這個loader取代style-loader。作用：提取js中的css成單獨檔案
minics***tractplugin.loader,
'css-loader',
}];module.exports = ,
module: ,,/*
正常來講，乙個檔案只能被乙個loader處理。
當乙個檔案要被多個loader處理，那麼一定要指定loader執行的先後順序：
先執行eslint 在執行babel
*/airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/test: /\.js$/,
exclude: /node_modules/,
// 優先執行
enforce: 'pre', // loader 的優先執行
loader: 'eslint-loader',
options:
},, // 指定core-js版本
// 指定相容性做到哪個版本瀏覽器
targets: }]
]}
},},,}
]},
plugins: [
// 提取css為單獨檔案
new minics***tractplugin(),
// css壓縮
new optimizecssassetswebpackplugin(),
new htmlwebpackplugin(
})],
mode: 'production'
};
webpack學習總結 開發環境
首先我們的目標，可以讓 執行，對 除錯的時候方便一些 建立webpack.config.js const require path node 內建核心模組，用來處理路徑問題。module.exports mode development 開發環境 首先我們需要 loader 配置 module ht...
webpack開發環境和生產環境打包
開發環境webpack.config.js基礎的配置 const path require path 首先要安裝該外掛程式 npm i html webpack plugin d const htmlwebpackplugin require html webpack plugin module.e...
webpack環境 開發環境和生產環境的區分
模組熱更新 sourcemap 介面 規範檢查 生產環境的需求 提取公共 壓縮混淆 檔案壓縮 base64編碼 去除無用的 二者共同點 同樣的入口 同樣的 處理 loader處理 同樣的解析配置 使用webpack merge拼接開發環境和生產環境 配置檔案 webpack.dev.conf.js ...