webpack5 之 css与js相关

webpack5 之 css相关

1：webpack5 之 css之加载、压缩、生成html

package.json

  "devDependencies": {
    "style-loader": "^3.3.1",
    "css-loader": "^6.5.1",
    "mini-css-extract-plugin": "^2.5.3",
    "css-minimizer-webpack-plugin": "^2.0.0",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  },
1
2
3
4
5
6
7
8
9

webpack.config.js

const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境 进行压缩css
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
module.exports = (env) => {
  return {
    entry: {
      main: './src/main.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bunder.js',
    },
    // loader相关配置
    module: {
      rules: [{
        test: /\.css$/, // 针对 .css 后缀的文件设置 loader
        use: [
          env.development ? 'style-loader' : {
            loader: MiniCssExtract.loader
          },
          'css-loader'
        ]
      }]
    },
    optimization: {
      minimizer: [
        // 压缩css - 生成环境
        new CssMinimizerPlugin(),
        // new TerserPlugin()
      ]
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    plugins: [
       // 分割css
      new MiniCssExtract({
        filename: '[name].css',
        chunkFilename: '[id].css'
      }),
      // 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
      new HtmlWebpackPlugin({
        // 打包输出HTML
        title: '自动生成 HTML',
        minify: {
          // 压缩 HTML 文件
          removeComments: true, // 移除 HTML 中的注释
          collapseWhitespace: true, // 删除空白符与换行符
          minifyCSS: true // 压缩内联 css
        },
        filename: 'index.html', // 生成后的文件名
        template: 'index.html', // 根据此模版生成 HTML 文件
        // chunks: ['main'] // entry中的 app 入口才会被打包
      }),
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

main.js 与 main.css

main.js
import "@/css/main.css"
console.log("main.js");

css / main.css
body{
  background: yellow;
}
1
2
3
4
5
6
7
8

npm run build 打包效果

打开 dist / index.html 文件

2：webpack5 之 scss使用

package.json

  "devDependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1"
  },
1
2
3
4

webpack.config.js

const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境 进行压缩css
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
module.exports = (env) => {
  return {
    entry: {
      main: './src/main.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bunder.js',
    },
    // loader相关配置
    module: {
      rules: [{
        test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
        use: [
          env.development ? 'style-loader' : {
            loader: MiniCssExtract.loader
          },
          'css-loader',
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      }]
    },
    optimization: {
      minimizer: [
        // 压缩css - 生成环境
        new CssMinimizerPlugin(),
        // new TerserPlugin()
      ]
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    plugins: [
      // 分割css
      new MiniCssExtract({
        filename: '[name].css',
        chunkFilename: '[id].css'
      }),
      // 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
      new HtmlWebpackPlugin({
        // 打包输出HTML
        title: '自动生成 HTML',
        minify: {
          // 压缩 HTML 文件
          removeComments: true, // 移除 HTML 中的注释
          collapseWhitespace: true, // 删除空白符与换行符
          minifyCSS: true // 压缩内联 css
        },
        filename: 'index.html', // 生成后的文件名
        template: 'index.html', // 根据此模版生成 HTML 文件
        // chunks: ['main'] // entry中的 app 入口才会被打包
      }),
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

main.js main.scss

main.js
import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js");

main.scss
$bgColor: red !default;
html {
  p {
    background-color: $bgColor;
  }
  .ppp {
    display: flex;
    justify-content: flex-end;
    color: #fff;
    background: #000;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

npm run build效果

3：webpack5 之 postcss、autoprefixer的配置 ( PostCSS自动补全浏览器前缀 )

package.json

  "devDependencies": {
    "autoprefixer": "9.8.6",
    "postcss-loader": "^6.1.0",
    "postcss-px-to-viewport": "^1.1.1",
  },
  "browserslist": [
    "> 1%",
    "last 2 version",
    "not ie <= 8"
  ]
1
2
3
4
5
6
7
8
9
10

webpack.config.js

    // loader相关配置
    module: {
      rules: [{
        test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
        use: [
          env.development ? 'style-loader' : {
            loader: MiniCssExtract.loader
          },
          'css-loader',
          'postcss-loader',
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      }]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')]
}
1
2
3

main.js 与 main.scss

main.js
import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js");

main.scss
$bgColor: red !default;
html {
  p {
    background-color: $bgColor;
  }
  .ppp {
    display: flex;
    justify-content: flex-end;
    color: #fff;
    background: #000;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

npm run build 效果

webpack5 之 js相关

1：webpack5 之 es6语法的转化

package.json

  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2",
    "babel-plugin-import": "^1.13.3",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "core-js": "^3.11.0"
  },
1
2
3
4
5
6
7
8
9
10
11

webpack.config.js

    // loader相关配置
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            },
          },
          exclude: /node_modules/
        },

      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

babel.config.js

const presets = [
  ["@babel/preset-env", {
    "useBuiltIns": 'usage', // 这里配置usage 会自动根据你使用的方法以及你配置的浏览器支持版本引入对于的方法。
    "corejs": "3.11.0" // 指定 corejs 版本 
  }]
]
const plugins = [
  ['import', {
    libraryName: 'vant',
    libraryDirectory: 'es',
    style: true
  }, 'vant']
]
module.exports = {
  plugins,
  presets
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

main.js

import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js");
let a = 100;
console.log("a",a);
const set = new Set([1, 2, 3, 1])
console.log('res,', set, '; set-arr', [...set])
1
2
3
4
5
6
7

npm run build 效果

2：webpack5 之 js代码的压缩

webpack.config.js （ TerserPlugin 自带的 ）

const TerserPlugin = require('terser-webpack-plugin');// js压缩
    optimization: {
      minimizer: [
        // 压缩js - 生产环境
        new TerserPlugin({
          // 多进程
          parallel: true,
          //删除注释
          extractComments: false,
          terserOptions: {
            compress: { // 生产环境去除console
              drop_console: true,
              drop_debugger: true,
            },
          },
        }),
      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./dist/css/style.css"> -->
</head>
<body>
  <script src="./dist/bunder.js"></script>
  <p>
    我是p
    <div class="ppp">我是ppp</div>
  </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

npm run build 效果 （ 压缩js，去掉无用的js）

• npm run build 效果
  
  
• npm run dev效果