小白学 Webpack之分离 CSS 打包

mini-css-extract-plugin 分离css 打包插件

npm i -D mini-css-extract-plugin

文档

修改配置,实现分离

var path = require('path');

//插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

//css抽离
var MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
  //入口文件
  entry: './src/index.js',
  output: {
    //文件名
    filename: 'js/main.js',
    path: path.resolve(__dirname, './dist/'),
    publicPath:'',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin()
  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          MiniCssExtractPlugin.loader //替换style-loader
          , 'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' //替换style-loader
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader:'url-loader',//这个url-loader需要依赖file-loader,所以只需要引入一个即可
        options:{
          limit:1024*14,//设置图片大小小于这个则用base64 14KB转成base64
          name:'./img/[name].[ext]' //打包存储位置
        }
      },
      {
        test: /\.html$/,
        use:['html-loader']

      }

    ]
  }
}
webpack 

描述
已经分离出来了。

提取到目录下

var path = require('path');

//插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

//css抽离
var MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
  //入口文件
  entry: './src/index.js',
  output: {
    //文件名
    filename: 'js/main.js',
    path: path.resolve(__dirname, './dist/'),
    publicPath:'',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    })
  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../' //设置图片路径
            }
          }
          , 'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../'
            }
          }
          , 'css-loader', 'less-loader'
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader:'url-loader',//这个url-loader需要依赖file-loader,所以只需要引入一个即可
        options:{
          limit:1024*14,//设置图片大小小于这个则用base64 14KB转成base64
          name:'[name].[ext]', //打包存储位置
          outputPath:'img'//打包目录
        }
      },
      {
        test: /\.html$/,
        use:['html-loader']

      }

    ]
  }
}

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。