繼續昨天的歪樓筆記，昨天只有寫 webpack-dev-server, 今天來加上一些基本的插件還有如何設定。
不過寫英文筆記，雖然文法可能廢到爛，但私心的好處是，自己的 blog 預設語系可以直接使用英文，等之後有空時，d可以直接翻譯 i18n 底下的中文語系筆記即可，算是先苦在前面吧，也許會有一點倒吃甘蔗的意味?
Webpack can only read javascript, if you want to read css or other syntax, must rely on plugins.
install plugins
npm install css-loader style-loader -D
setting webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
touch file and test style.
mkdir styles
cd styles
touch index.css
index.css
body {
background: blue;
}
index.js
import './styles/index.css';
restart npm run dev , can see page background is blue.
I will add [hash] in output, because need every npm run build can generate a hash name js file, avoid browser cache same file name, Cause client-side page is not update.
module.exports = {
output: {
// ...
filename: 'js/[name].[hash].bundle.js',
},
};
Because everytime bundle js file name is different, we can't manually setting html file's src path. Must rely on plugin auto generate html file.
npm install html-webpack-plugin -D
Delete dist folder and return root directory, mkdir index.html and create content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles/index.css" />
<title>Document</title>
</head>
<body>
<div class="app">This App Page</div>
</body>
</html>
setting html-webpack-plugin
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
};
test npm run build you can see the dist folder will auto generated HTML, JS file.
style-loader will generate Inline Styles, I hope change to External Style Sheet.
npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
After using hash, the file name generated will be different each time. After long time, much invalid files will appear in the dist folder. Here you can use plugin to automatically clear before each build.
npm install clean-webpack-plugin -D
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin(),
],
};
If you want to use ES6+ syntax, sometime browser maybe can't support, so use babel plugin can help you compiler into to ES5.
For example, when you write const a = 10;, const will compiler to var.
npm install babel-loader @babel/core @babel/preset-env -D
touch babel.config.json
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
setting babel.config.json
{
"presets": ["@babel/preset-env"]
}
The compiled file is difficult to read. If it runs normally before compilation, but an error occurs after compilation, then you need the source-map to view the source code.
module.exports = {
devtool: "source-map",
}
Similarly, webpack cannot directly read files such as images, and these files are collectively classified into Assets and used through settings.
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset/resource',
},
],
},
};
iThome鐵人賽
看影片追技術