继续昨天的歪楼笔记，昨天只有写 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',
},
],
},
};
<<: [Day30] Flutter with GetX flutter_WebRTC
>>: 公家机关 资讯安全 远端连线 录影 VNC 被控端 呼叫 主控端
今天我们要来介绍 AWS IAM 的实作示范，那我们开始吧! 建立新的 IAM User 首先进入...
发想自己的需求，看看生活中有什麽是想要改进的或是解决的，再来立定一个主题吧！ 目前比较烦恼的大概是：...
1. 边偏移 边偏移就是定位的盒子移动到最终位置，有top bottom left right 四种...
第二天，我们在讲解基本语法之前，先讲一下我们变数在命名的时候会遇到的"驼峰式命名法&quo...
=___="再次证明，每天都要发文，原来也不容易。来到了第17天了~要撑住 ▉A.9存取控...