webpack篇(二)：打包css文件

你需要先安装两个 loader

npm i css-loader style-loader -D

再 webpack.config.js中新增module选项

const path = require('path')

module.exports = {
  mode: 'development',
  entry: {
	'js/bundle': './src/index.js',
	'js/test': './src/test.js'
  },
  output: {
	path: path.resolve(__dirname, 'dist')
  },
  // 新增的配置·················································
  module: {
  	rules: [
	  {
		test: /\.css$/,
		// 注意，下面loader的顺序是固定的，他们执行的顺序是从最后一个loader向前执行
		use: ['style-loader', 'css-loader']
	  }
	]
  }
  // 上面是新增的配置···········································
}

此时你还需要再src目录中添加一个css文件，并在index.js中引入

src
|——index.js
|—— style.css
webpack.config.js

import './style.css'

此时运行以下命令打包，会发现生成的dist目录中只有一个bundle.js文件，并没有css文件，这是因为 css 文件被 style-loader解析在了js文件中

npx webpack --config webpack.config.js

如果需要生成单独的文件，就需要使用 mini-css-extract-plugin 来替换style-loader

npm i mini-css-extract-plugin -D

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  entry: {
	'js/bundle': './src/index.js',
	'js/test': './src/test.js'
  },
  output: {
	path: path.resolve(__dirname, 'dist')
  },
  module: {
  	rules: [
	  {
		test: /\.css$/,
		// 有改动的代码································
		use: [
		  // 'style-loader',
		  MiniCssExtractPlugin.loader
		  'css-loader'
		]
		// 上面是改动的代码····························
	  }
	]
  },
  // 添加的代码········································
  plugins: [
	new MiniCssExtractPlugin({
	  filename: 'css/[name].css'
	})
  ]
  // 以上是添加的代码···································
}

此时运行以下命令打包，dist 目录中就生成了一个css 文件

npx webpack --config webpack.config.js