webpack从0到1的配置（四）

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进去了
• 继续学习webpack从0到1的配置（五）