使用webpack5从0到1搭建React+TypeScript 项目环境(2)

最新推荐文章于 2024-10-27 16:22:37 发布

原创

最新推荐文章于 2024-10-27 16:22:37 发布 · 1.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #typescript #前端

ps:更正一下上一篇打包时出现的错误的命令

build时忘记加 -c 了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve -c  ./config/webpack.config.js --env development",
    "build": "webpack -c ./config/webpack.config.js --env production"
  },

1. 配置css、less、sass、以及css module

安装loader

$ npm install css-loader style-loader -D

or

$ yarn add css-loader style-loader -D

修改配置文件

// webpack.config.dev.js
module: {
  rules: [
    // 其他配置项,
    {
      test: /\.css$/i,
      use: ["style-loader", "css-loader"],
    },
  ],
},

这样配置后当webpack遇到 .css文件它将使用css-loader和style-loader进行处理,use数组中的loader将从后往前依次执行.

在生产环境下,我们需要对css文件进行压缩,同时还需要将css提取成单独的文件,我们需要使用到mini-css-extract-plugin这个插件

$ npm install mini-css-extract-plugin -D

or

$ yarn add mini-css-extract-plugin -D

接着修改生产环境的配置文件

// 引入插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,