webpack生产环境之提取css成单独文件

最新推荐文章于 2024-08-09 07:30:56 发布

yinrongjing2829

最新推荐文章于 2024-08-09 07:30:56 发布

阅读量605

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/yinrongjing2829/article/details/121396790

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、下载插件(plugin)

npm i mini-css-extract-plugin -D

2、配置

const { resolve } =require("path")
const htmlWebpackPlugin=require("html-webpack-plugin")
const MiniCssExtractPlugin=require("mini-css-extract-plugin")//第一步:引入插件
module.exports={
  entry: './src/js/index.js',
  output: {
    filename: "./js/built.js",
    path: resolve(__dirname,'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          //style-loader作用：创建style标签，将样式放入
          // 'style-loader',
          //第二步：使用loader
          //这个loder代替style-loader，作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          //将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html"
    }),
    // 第三步：指定路径
    new MiniCssExtractPlugin({
      //对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: "development"
}