vue需要的插件
axios(封装的Ajax)
body-parser(处理post传来的参数)
clean-webapck-plugin(清空dist)
css-loader,sass-loader,style-loader,node-sass(处理样式)
file-loader,url-loader(处理图片)
html-loader,html-webpack-plugin(处理HTML)
mini-css-extract-plugin(分离css)
opitimize-css-assets-webpack-plugin(压缩css)
//html
const HtmlWebPackPlugin=require("html-webpack-plugin");
//清空dist
const CleanWebPackPlugin=require("clean-webpack-plugin");
//分离css
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
//压缩JS
const TerserWebPackPlugin=require("terser-webpack-plugin");
//处理文件的绝对路径
const path=require("path");
//body-parser中间件，处理post请求传过来的参数
const bodyParser=require("body-parser");
webpack.config.js
- //html const HtmlWebPackPlugin = require("html-webpack-plugin"); //清空dist const CleanWebPackPlugin = require("clean-webpack-plugin"); //分离css const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //压缩JS const TerserWebPackPlugin = require("terser-webpack-plugin"); //处理文件的绝对路径 const path = require("path"); //body-parser中间件，处理post请求传过来的参数 const bodyParser = require("body-parser"); // const VueLoaderPlugin = require("vue-loader/lib/plugin"); const { VueLoaderPlugin } = require("vue-loader") module.exports = { //入口文件 entry: "./src/index.js", //出口配置 output: { filename: "assets/[name].[hash:6].[ext].js", //生成文件的名字 path: path.join(__dirname, "dist") //生成文件的路径 }, //加载模块，配置各种模块 module: { rules: [{ test: /.vue$/, loader: 'vue-loader' }, { test: /.(sass|scss|css)$/, use: ["style-loader", "css-loader", "css-loader"] }, { test: /.(jpe?g|png|gif|svg)$/, use: [{ loader: "url-loader", options: { limit: 10240, name: "assets/[name].[hash:6].[ext]" } }] }, { test: /.(eot|ttf|svg|woff2?)$/i, use: ["url-loader"] }] }, resolve: { extensions: ['.js', '.vue', '.json'], //通过webpack 设置文件夹别名，方便查找文件 alias: { "@": path.join(__dirname, "src") } }, //插件 plugins: [ new VueLoaderPlugin(), //打包前清空 // new CleanWebPackPlugin(), //自动注入 new HtmlWebPackPlugin({ template: "index.html", filename: "index.html", inject: true }), //抽离CSS // new MiniCssExtractPlugin({ // filename: "assets/[name].css", // chunkFilename: "assets/[id].css" // }) ], //配置服务 devServer: { open: true, //自动打开浏览器 hot: true //热更新 // host: "163.162.832", //别人访问你的网址 // port: 1000, //配置指定端口号 // before(app) { // app.get("/api/list", (req, res, next) => { // let data = JSON.parse(fs.readFileSync("./mock/data.json")) // res.send({ code: 1, data: data }) // }) // } } }