安装依赖
因为yarn异常问题比npm要少一些,所有改用yarn了,如果没有yarn可以用npm全局安装npm install yarn -g
,sass有两种dart-sass和node-sass,dart-sass是sass的一个新版本,而且不会出现node-sass依赖安装不上的坑。使用时唯一的区别是样式穿透时node-sass中使用/deep/
,二dart-sass中使用::v-deep
yarn add sass sass-loader --save
配置
// 生成HTML
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 清空文件夹
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
// 提取css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 实现处理.vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = function (env, argv) {
return {
// 入口
entry: {
main: "./src/main.js",
},
// 出口
output: {
path: `${
__dirname}/dist`,
// 公用部分代码块文件名,公用部分的代码会提取压缩到这个文件中
chunkFilename:
argv.mode == "production"
? "[name].[contenthash].js"
: "[name].chunk.js",
// 模块名+哈希字符的文件名
filename:
argv.mode == "production"
? "[name].[contenthash].js"
: "[name].chunk.js",
},
// 插件配置
plugins: [
// 打包前清理dist
new CleanWebpackPlugin(),
// 生成HTML文件并导入js和css
new HtmlWebpackPlugin({
template: "public/index.html",
}),
new VueLoaderPlugin(),
// 将css提取到一个单独的文件
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
],
// 加载器:处理css,图片,字体文件等
module: {
rules: [
{
test: /\.(|css|scss|)$/,
use: [
argv.mode == "production"
? MiniCssExtractPlugin.loader
: "vue-style-loader", //开发时不需要提取css文件
argv.mode == "production" ? "css-loader" : "style-loader", //处理编译不需要style-loader
"css-loader",
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
// 优化
optimization: {
//压缩: production 模式下默认true
// minimize: true,
// 运行的公用文件,设置为single时会将所有的共享依赖合并成一个文件,当有多个入口文件时需要这样做
runtimeChunk: "single",
// 动态模块导入的共享模块配置
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
// 值为all时,import动态导入的模块也会被打包的共享部分代码文件里,值为async时只会共享异步的模块,initial时只共享同步的模块
chunks: "initial",
},
},
},
},
// 开发服务器
devServer: {
// 监听文件的位置
// contentBase: `${__dirname}/dist`,
// compress: true,
port: 9000,
//允许通过外部访问
// host: "0.0.0.0",
// 模块热替换,实现只更新局部
hot: true,
},
};
};