webpack基本配置及使用
程序员文章站
2022-03-06 13:56:21
...
- webpack简介
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
- 首先在项目文件夹下安装
webpack、webpack-dev-server、webpack-cli
cnpm i webpack webpack-dev-server webpack-cli -D
- 配置
package.json文件dev
{
"name": "webpack2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.4",
"webpack-dev-server": "^3.10.1"
}
}
在项目目录下定义一个webpack.config.js文件
entry：打包入口文件webpack加载
main.js文件，依次进行打包，包含引用的文件
output：打包文件输出路径，及名称
devServer：基本配置
open：自动打开浏览器
hot：热更新
port：端口
host：主机
contentBase：托管文件夹，服务运行后的文件，默认打开文件夹下的index.html
const path = require("path");
module.exports = {
entry: path.join(__dirname, "./src/main.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: 'bundle.js'
},
devServer: {
open: true,
hot: true,
port: 8087,
host: 'localhost',
contentBase: path.join(__dirname, "./src")
}
}
- 插件安装
安装
html-webpack-plugin插件，引用打包后的文件路径（内存中）
cnpm i html-webpack-plugin -D
在
webpack.config.js引用，并添加到plugins配置中
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
filename: 'index.html'
})
]
}
下面在main.js里面添加
document.getElementById('content').style.color = "red";查看效果
检查源码可以发现<script type="text/javascript" src="bundle.js"></script>引用了打包好的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="content">这是一个content</p>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
- 使用css-loader打包css文件，安装
cnpm i css-loader style-loader -D，配置完成后在main.js引入css文件就ok - scss需安装
cnpm i sass sass-loader node-sass -D并配置rules，然后在main.js引入
rules：加载器集合
test：正则匹配css
use：使用加载器去打包匹配的文件
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.sass|scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
上一篇： DelphiXE矩阵乘法的并行设计
下一篇： python多线程与多进程的方法