目标四：用webpack引入CSS

在src文件夹中创建一个x.css，写入

/*src/x.css*/
body{
    background:red;
}

进入src/x.js，写入

//src/x.js
import css from './x.css'

安装css-loader与style-loader

yarn add css-loader@3.2.0 --dev
yarn add style-loader@1.0.1 --dev

修改配置文件，添加module

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
          ]
 }
    ...
}

运行yarn build

打开dist/index.html

cd dist
http-server . -c-1

会发现body变红，且head里面多了一个style标签

这就是修改配置造成的，上述webpack.config.js里rules的意思是：

• 如果发现以.css结尾的文件名
• 就用css-loader去处理这个文件，css-loader会把这个文件的内容给读到JS里
• style-loader会把css-loader读到的东西变成一个style标签，放到head里

插播：使用 webpack-dev-server

每次使用http-sever都很麻烦，所以webpack-dev-server来解决这个问题

yarn add webpack-dev-server@3.9.0 --dev

修改配置文件

//webpack.config.js
module.exports = {
 ...
  devtool:'inline-source-map',
  devServer:{
    contentBase:'./dist'
  },//添加这两行
  ...
  output: {
    ...
  },
  plugins: [new HtmlWebpackPlugin({
   ...
  })],
  module: {
    ...
  },
};

修改package.json

{
    ...
    "scripts": {
    "start": "webpack-dev-server",//添加start
    "build": "rm -rf dist && webpack",
  },
    ...
}

随后运行yarn start即可

这样每次改代码就不用再去build，它不依赖dist目录，而是直接在内存里面更改

把CSS抽成文件

安装mini-css-extract-plugin

yarn add mini-css-extract-plugin@0.8.0 --dev

配置文件

//webpack.config.js
module.exports = {
    ...
  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
    module: {
    rules: [
      ...
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
        ],
      }
    ]
  }
};

yarn build

会发现dist中多了一个CSS文件

且点开index.html会发现这个CSS文件自动被引入了

至此完成CSS抽成文件

根据不同模式选择不同编译

那么，如何在development模式时把JS生成style

production模式时把CSS抽成文件？

首先在webpack-demo下新创建一个webpack.config.prod.js用于production模式

更改package.json

{
    ...
    "scripts": {
    "start": "webpack-dev-server",
    "build": "rm -rf dist && webpack --config webpack.config.prod.js",
  },
    ...
}

再新建一个webpack.config.base.js，运用继承的思想，把两个模式的共有属性放到base里

//webpack.config.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js'
    },
    plugins: [new HtmlWebpackPlugin({
        title: 'My App',
        template: "src/assets/index.html"
    })
   ],
}

更改webpack.config.js

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入Base
const base = require('./webpack.config.base.js')

module.exports = {
    ...base, // 把base的所有属性都引入进来
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

更改webpack.config.prod.js

//webpack.config.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入Base
const base = require('./webpack.config.base')

module.exports = {
    ...base,
    mode: "production",
    plugins: [
       // 先继承共有属性的
        ...base.plugins,
       // 再叠加上独有的，
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[id].[contenthash].css',
        })
    ],
  module: {
    rules: [
      ...base.module.rules,
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
        ],
      }
    ]
  }
};

总结之前的内容

一图总结：

loader与plugin有什么区别？

• loader是加载器，plugin是插件
• 加载器就是用来加载文件的，比如
  • babel-loader是用来加载JS的，把高级的JS转译成低版本的JS,
  • style/css-loader是用来加载CSS的，把它变成页面中的标签或做其他的处理
• 插件是用来扩展webpack功能的，比如
  • HTML-webpack-plugin是用来生成HTML文件的
  • mini-css-extract-plugin可以把多个CSS文件合并成一个CSS文件
• loader主要专注于转换文件，而plugin的功能更加的丰富，不仅局限于资源的加载