webpack处理样式

最新推荐文章于 2022-09-07 22:52:08 发布

rookieLink

最新推荐文章于 2022-09-07 22:52:08 发布

阅读量203

点赞数

分类专栏： webpack系列

本文链接：https://blog.csdn.net/zf2014122891/article/details/104553133

版权

一般配置

首先安装模块，一般不需要都安装，看个人项目需要

yarn add style-loader css-loader less-loader sass-loader -D

webpack.config.js

let path = require('path');
let HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   
    devServer: {
    // 开发服务器的配置
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
    },
    mode: 'development',  // 模式 模式有两种  production development
    entry: './src/index.js', // 入口
    output: {
   
        filename: "bundle.[hash:8].js", // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 路径必须是绝对路径
    },
    plugins: [  // 放着所有的webpack插件
        new HTMLWebpackPlugin({
   
            template: "./src/index.html",
            filename: "index.html",
            minify: {
   
                removeAttributeQuotes