webpack从0到1的配置(四)

2019/7/23 17:54:07 人评论 次浏览 分类:学习教程

webpack从0到1的配置(一)

webpack从0到1的配置(二)

webpack从0到1的配置(三)

  • 如何将css文件打包成单独的文件,并且归类放到css文件夹下
  • 需要下载插件
  • npm install mini-css-extract-plugin --save-dev   可以使css,less打包成单独的css文件,而不是嵌在js文件里面
  • 修改webpack.config.js文件,用MiniCssExtractPlugin.loader来代替style-loader
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
+   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module.exports = {
      entry: {
        main: './src/main.js'
      },
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
      },
      module: {
        rules: [
        {
          test: /\.css$/,
          use: [{
+           loader: MiniCssExtractPlugin.loader,
          }, 'css-loader']
        }]
      },
      plugins: [
+       new MiniCssExtractPlugin({
          filename: 'css/[name].[contenthash].css',
+         chunkFilename: "css/[id].css"
+       }),
        new HtmlWebpackPlugin({
          title: 'index', // <title>标签的内容
          template: './index.html', // 以哪一个html为模版
        }),
      ]
    }
  • 执行npm run build 
  • 可见dist文件夹下多了一个css文件夹,里面有打包出来的css文件,并且index.html自动将css文件link进去了

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->