仿掘金社区全栈项目开发(二)-前端工程化

前端工程化

webpack

核心概念

看官方文档：https://webpack.docschina.org/concepts/

小demo

参考博客：https://juejin.cn/post/6982361231071903781

实时更新并预览效果

地址：https://juejin.cn/post/6982361231071903781#heading-6

这里有个bug需要解决，这个博客提供的 webpack-cli 版本不够，会产生如下报错

将 webpack-cli 升级到 4.9.0 即可

npm i webpack-cli@4.9.0

sourcemap 配置

地址：https://juejin.cn/post/6982361231071903781#heading-7

拆分环境

地址：https://juejin.cn/post/6982361231071903781#heading-8

打包时清除上次构建产物

地址：https://juejin.cn/post/6982361231071903781#heading-9

添加 css 和 less 支持

地址：https://juejin.cn/post/6982361231071903781#heading-11

css module

地址：https://juejin.cn/post/6982361231071903781#heading-12

这里有bug需要解决：js中代码中赋值的test样式类，编译后好像没按css module的方式来，类名还是test，样式也没有改变。

源代码：

import './index.less'

class Test {
  constructor() {
    this.renderDiv()
  }

  renderDiv() {
    const div = document.createElement('div')
    div.className = 'test'
    div.innerHTML = 'hello world'
    document.body.appendChild(div)
  }
}

new Test()

修改后代码：

import style from './index.less'

class Test {
  constructor() {
    this.renderDiv()
  }

  renderDiv() {
    const div = document.createElement('div');
    div.className = style.test;
    div.innerHTML = 'hello bbb'
    document.body.appendChild(div)
  }
}

new Test()

css 自动添加前缀

地址：https://juejin.cn/post/6982361231071903781#heading-13

打包后抽离 css 文件

地址：https://juejin.cn/post/6982361231071903781#heading-14

bug：MiniCssExtractPlugin.loader，走到这一步，build就出错了

解决：因为style-loader和 MiniCssExtractPlugin.loader 冲突，去除掉style-loader即可

代码：

use: [
    MiniCssExtractPlugin.loader, 
    {
        loader: 'css-loader',
        options: {
            modules: {
                localIdentName: "[local]__[hash:base64:5]",
            },
        },
    }, 
    'less-loader',{
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    ["autoprefixer"],
                ],
            }
        }
    }
]

压缩打包后的 css 文件

地址：https://juejin.cn/post/6982361231071903781#heading-15

复制静态资源到打包目录

地址：https://juejin.cn/post/6982361231071903781#heading-16

有些时候有些第三方的 js 插件没有提供 npm 包，只提供了一个 cdn 地址或者一份文件需要自己下载下来。通常我们下载下来之后放在我们的 public/js 目录下面，然后 public/index.html 文件里直接用 script 标签引入。这个时候不管是 npm run dev 开发时，还是 npm run build:pro 构建后，这个 js 文件都是找不到的。

bug：按照文档写代码会报错。

解决：copy-webpack-plugin 最新是11.0.0 版本，降到 9.0.0就可以了

npm install copy-webpack-plugin@9.0.0 -D

资源加载器

地址：https://juejin.cn/post/6982361231071903781#heading-17

Gulp

直接写过一个简单使用gulp的博客

地址：https://blog.csdn.net/hangao233/article/details/122924520?spm=1001.2014.3001.5501