webpack的開發環境從0到1的配置
阿新 • • 發佈：2020-08-08
1.打包樣式資源
style-loader,css-loader,less-loader
less-loader:解析less檔案；
css-loader:解析css資料夾中的.css檔案；
style-loader:解析HTML中的行內的css程式碼，提取到js的打包檔案中；
/* webpack.config.js webpack的配置檔案 作用: 指示 webpack 幹哪些活（當你執行 webpack 指令時，會載入裡面的配置） 所有構建工具都是基於nodejs平臺執行的~模組化預設採用commonjs。 */ // resolve用來拼接絕對路徑的方法 const { resolve } = require('path'); module.exports= { // webpack配置 // 入口起點 entry: './src/index.js', // 輸出 output: { // 輸出檔名 filename: 'built.js', // 輸出路徑 // __dirname nodejs的變數，代表當前檔案的目錄絕對路徑 path: resolve(__dirname, 'build') }, // loader的配置 module: { rules: [ // 詳細loader配置 // 不同檔案必須配置不同loader處理 { // 匹配哪些檔案test: /\.css$/, // 使用哪些loader進行處理 use: [ // use陣列中loader執行順序：從右到左，從下到上 依次執行 // 建立style標籤，將js中的樣式資源插入進行，新增到head中生效 'style-loader', // 將css檔案變成commonjs模組載入js中，裡面內容是樣式字串 'css-loader' ] }, { test: /\.less$/, use: ['style-loader', 'css-loader', // 將less檔案編譯成css檔案 // 需要下載 less-loader和less 'less-loader' ] } ] }, // plugins的配置 plugins: [ // 詳細plugins的配置 ], // 模式 mode: 'development', // 開發模式 // mode: 'production' }
2.打包HTML資源
需要藉助於外掛html-webpack-plugin
/* 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: 'built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader的配置 ] }, plugins: [ // plugins的配置 // html-webpack-plugin // 功能：預設會建立一個空的HTML，自動引入打包輸出的所有資源（JS/CSS） // 需求：需要有結構的HTML檔案 new HtmlWebpackPlugin({ // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS） template: './src/index.html' }) ], mode: 'development' };
3.打包圖片資源
url-loader:解析圖片資源，這個loader解析的是圖片資料夾中的圖片資源，非html中的圖片資源；而HTML的img的處理是藉助於html-loader
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__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,
// 問題：因為url-loader預設使用es6模組化解析，而html-loader引入圖片是commonjs
// 解析時會出問題：[object Module]
// 解決：關閉url-loader的es6模組化，使用commonjs解析
esModule: false,
// 給圖片進行重新命名
// [hash:10]取圖片的hash的前10位
// [ext]取檔案原來副檔名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理）
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
4、打包其他資源(file-loader:本意為其他檔案原樣輸出，不做任何處理)
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他資源(除了html/js/css資源以外的資源)
{
// 排除css/js/html資源
exclude: /\.(css|js|html|less|jpg|png|gif|jpeg)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
5.devServer
本地伺服器配置
module.exports={ // 開發伺服器 devServer：用來自動化（自動編譯，自動開啟瀏覽器，自動重新整理瀏覽器~~） // 特點：只會在記憶體中編譯打包，不會有任何輸出 // 啟動devServer指令為：npx webpack-dev-server devServer: { // 專案構建後路徑 contentBase: resolve(__dirname, 'build'), // 啟動gzip壓縮 compress: true, // 埠號 port: 3000, // 自動開啟瀏覽器 open: true } }
6.開發環境配置
/* 開發環境配置：能讓程式碼執行 執行專案指令： webpack 會將打包結果輸出出去 npx webpack-dev-server 只會在記憶體中編譯打包，沒有輸出 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader的配置 { // 處理less資源 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { // 處理css資源 test: /\.css$/, use: ['style-loader', 'css-loader'] }, { // 處理圖片資源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', // 關閉es6模組化 esModule: false, outputPath: 'imgs' } }, { // 處理html中img資源 test: /\.html$/, loader: 'html-loader' }, { // 處理其他資源 exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true } };