vue03-webpack配置

xiao奥

已于 2022-02-15 21:58:50 修改

阅读量2k

点赞数

文章标签： webpack 前端 node.js

于 2022-02-15 21:58:29 首次发布

本文链接：https://blog.csdn.net/liangaoyun/article/details/122952473

版权

本文详细介绍了在前端开发中如何配置和使用Webpack，包括Webpack的准备工作，如环境初始化和依赖安装；接着讲解了Webpack的插件配置，如自动生成HTML；接着探讨了Webpack加载器的使用，如处理CSS、LESS、图片和字体文件；还提到了Webpack的热更新功能，以及在webpack.config.js中配置服务器。

摘要由CSDN通过智能技术生成

webpack.config.js中添加服务器配置

webpack.config.js

webpack：静态模块打包器

除了合并代码, 还可以翻译和压缩代码

less/sass -> css

ES6/7/8 -> ES5

webpack-使用前-准备

1、初始化包环境

yarn init -y

2、安装依赖包

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D

3、在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

webpack插件

自动生成html插件

1、下载插件

yarn add html-webpack-plugin@5.3.1  -D

2、webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

webpack加载器

webpack-加载器-处理css文件

wenpack不能识别css文件, webpack默认只识别js文件

1、安装依赖

yarn add css-loader@5.2.1 style-loader@2.0.0  -D

2、webpack.config.js 配置

module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的