1.下载插件
npm install webpack -g
npm install vue-loader style-loader css-loader babel-loader url-loader --save
2.package.json文件中修改
3.新建webpack.config.js文件,进行配置,配置如下
const path = require("path"); // 引用path模块
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
// 入口文件
entry: "./src/main.js",
output: {
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path: path.resolve(__dirname, "dist"),
// 输出的文件名称
filename: "bundle.js",
clean: true,
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.vue$/, use: "vue-loader" },
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
// 处理图片资源
test: /\.jpg|png|gif$/,
// 只使用一个loader处理,写法如下:
// 下载 url-loader 和 file-loader
loader: "url-loader",
include: [path.resolve("static")],
// loader的配置可以通过option来配置
options: {
// 图片大小小于12kb,就会base64处理
// 通常我们只会对8-12kb以下的图片进行base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 12 * 1024,
},
},
],
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/index.html"),
}),
],
};
4.运行npm run build
5.成功后的dist文件夹,点击index.html,查看即可。
若有网络请求失败,属于正常现象,因为地址不同,直接提交即可,部署到服务器上就能正常运行了。
--------------------------------end
该文介绍了如何下载和配置Webpack及相关插件,如vue-loader、style-loader、css-loader等,然后在package.json中修改设置,创建webpack.config.js文件进行详细配置,包括入口文件、输出、模块规则和插件。最后通过npmrunbuild执行构建,生成的dist文件夹中的index.html可查看结果。若遇到网络请求失败,可能是由于本地环境因素,部署到服务器后可正常运行。
3665

被折叠的 条评论
为什么被折叠?



