自动化构建工具——7.webpack提取CSS成单独文件

生产环境搭建——提取CSS成单独文件

一、目录结构

自动化构建工具——7.webpack提取CSS成单独文件_第1张图片

  • a.css
#box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}
  • b.css
#box2 {
  width: 200px;
  height: 200px;
  background-color: deeppink;
}
  • index.js
import '../css/a.css'
import '../css/b.css'
  • index.html
<body>
  <div id="box1">div>
  <div id="box2">div>
body>

二、下载插件

输入指令(根目录):

npm i mini-css-extract-plugin -D

自动化构建工具——7.webpack提取CSS成单独文件_第2张图片

三、修改配置文件

  • webpack.config.js
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标签,将样式放入
          // 'style-loader',
          // 这个loader取代style-loader,作用:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}

四、运行webpack/npx webpack-dev-server

  • 运行webpack指令后
    自动化构建工具——7.webpack提取CSS成单独文件_第3张图片
  • 目录结构:
    自动化构建工具——7.webpack提取CSS成单独文件_第4张图片
  • 运行./build/index.html
    自动化构建工具——7.webpack提取CSS成单独文件_第5张图片

你可能感兴趣的:(自动化构建工具——7.webpack提取CSS成单独文件)