webpack配置指南

本篇文章主要配置webapck的流程，以及遇到的问题。都是基础的配置，有的不一定适合项目中，熟练掌握后可以运用自如。

安装：node

node官网下载终端运行node -v和npm -v

node V12

npm源：可以修改为淘宝源

npm config set registry registry.npm.taobao.org/

还原

npm config set registry registry.npmjs.org/

补充：可以给项目定义个文件.npmrc 不管本地有没有配源都直接走这个文件的源

registry=http://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass
disturl=https://npm.taobao.org/dist
profiler_binary_host_mirror=https://npm.taobao.org/mirrors/node-inspector/
fse_binary_host_mirror=https://npm.taobao.org/mirrors/fsevents/

mkdir webpack-demo-pro

cd webpack-demo-pro

npm init -y

npm install webpack -D

npm install webpack-cli -D

补充：写这篇文章时webpack已经进入5.0时代，直接这样安装webpack-cli安装的版本为4.2.0，在第四步时候会出现报错，报错为Cannot find module 'webpack-cli/bin/config-yargs' webpack配置指南这个错误是由于版本不一致导致滴，我尝试重新安装一下cli工具，采用3.3版本滴

npm install webpack-cli@3.3 -D

发现可以运行了

结果： webpack配置指南 npm install的包都会在node-modules文件夹下

补充：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "echo \"hhhh\""
  },

终端运行：npm start

输出： webpack配置指南

新建文件src/index.js （在本文件中可以使用ES6的一下用法，比如箭头函数）比如：

class Person {
    constructor(name) {
        this.name = name
    }
    getName() {
        return this.name;
    }
}

const xiaomin = new Person('小明');
console.log(xiaomin.name);

webpack 4.0后开箱即用

运行webpack --mode=development在本地会生成一个新的文件夹dist webpack默认的entry是./src/index.js(可以尝试将文件夹改为main.js观察一下) 生成的文件结果：

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is not neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements:  */
eval("class Person {\n    constructor(name) {\n        this.name = name\n    }\n    getName() {\n        return this.name;\n    }\n}\n\nconst xiaomin = new Person('小明');\n\n//# sourceURL=webpack://webpack-demo-pro/./src/index.js?");
/******/ })()
;

可以看到语法还是ES6的语法，所以没法运行

webpack的默认配置的源码可以看这个文件：webpack里lib/WebpackOptionsDefaulter.js这个文件

npm install babel-loader -D 新建webpack.config.js文件文件内容

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config ./webpack.config.js --mode=development"
  },

运行 npm start 可以发现打包后的文件没有变化

npm install @babel/core -D
npm i @babel/preset-env @babel/plugin-transform-runtime -D

运行结果： webpack配置指南

npm install @babel/runtime @babel/runtime-corejs3

再次运行发现编译成功了这里可以尝试运行下

node dist/main // 运行结果为小明

补充其他知识： module.exports rules里的配置项 test use/loader exclude .babelrc文件

npm install html-webpack-plugin -D

然后新建public/index.html文件，然后自己写个模板如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

npm start

这是可以看到dist文件夹下有两个文件

main.js

index.html

在html文件里引入了这个main.js webpack配置指南可以右键编辑器，选择在默认浏览器中打开html文件，可以发现执行了main.js的内容

但是仅仅这样还没法使用，真实的项目中我们需要实时展示我们的效果，所以需要本地开启一个服务器

npm i webpack-dev-server -D

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务

关于webapck-dev-server的配置可以参考这篇文章：https://blog.csdn.net/weixin_43684713/article/details/92839419

然后修改package文件的srcipt命令：

"scripts": {
    "start": "webpack-dev-server",
    "test": "node dist/main"
  },

运行 npm run start服务启动了，打开相应网址：一般是http://localhost:8080/

可以看到会展示实时的内容

但素，对于服务器需要定制化

于是我这样配置了我的服务器

devServer: {
        quiet: false, // 是否不打印任何信息到错误台 不看日志那就可以不开发了 所以需要设置为false
        contentBase: path.resolve(__dirname, 'dist'), // 在配置了html-webpack-plugin文件的情况，这个配置没有作用
        hot: true, // 开启热更新
        disableHostCheck: true,
        port: 3002, // 默认是8080
        noInfo: false,
        inline: true, // 默认开启 inline 模式，如果设置为false,开启 iframe 模式
        overlay: true, // 当编译出错时，会在浏览器窗口全屏输出错误，默认是关闭的
        publicPath: '', // webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径，它被称为公共路径(publicPath)
        stats: { // 控制台日志 当启动quiet和noInfo时这个配置会不起作用
            cached: true,
            colors: true,
        },
        host: '0.0.0.0',
        compress: true, //是否启用 gzip 压缩
    },

本地已经可以运行起来，如何区分本地和开发环境呢，各个团队的方式不同，我们业务中主要的配置是：在我们的浏览器的控制台输出的一些信息很明显，对应的行数和真实的源码中的行数不太相同，浏览器显示的是编译后的代码中的行数

配置： devtool: 'cheap-module-source-map',

在webpack5中对devtool的配置更加严格，有相应的匹配规则，有兴趣可以了解下

npm i react react-dom -D
npm i @babel/preset-react -D
 .babelrc配置 : "presets": ["@babel/preset-env", "@babel/preset-react"],

新建src/App.js文件，内容如下

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return (
    <div>
      <p>不愧是你</p>
    </div>
  );
};
export default App;
ReactDOM.render(<App />, document.getElementById("root")); // 这里的root是index.html中给某的元素加了id=root

然后在index.js中引入：

import App from "./App";

可以看到代码基本可以跑起来

但如果是项目的话，肯定还有路由一系列东西因为这不是本文讨论的内容所以省略，如果有兴趣可以看这篇文章https://www.cnblogs.com/loaderman/p/11556639.html

只在文件中应用了css文件，因为webapck不能识别css文件，需要使用loader文件

style-loader

css-loader

 {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    exclude: /node_modules/
 }

一般项目中不会直接用css文件，一般都会用less，甚至可能还需要用到css-modules用来做样式隔离

npm install antd --save

在App.js中直接使用，发现没有样式

关于antd引入样式遇到的问题和解决方式我会再写一篇记录～

总之，解决完样式引入问题，基本就可以再本地开发了～

关于文字和图片，都需要loader来协助

1、引入字体文件，可能出现跨域问题引入字体：

@font-face {
    font-family: DS-DIGI;
    src: url('./assets/DS-DIGI.TTF');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

div {
    color: red;
    font-family: DS-DIGI;
}

 npm i file-loader -D

这样配置在本地是可以运行的但是部署到CDN上可能会出现跨域问题可以转化为base64的方法

字体文件转化可以到这里：https://transfonter.org/

2、引入图片

body {
    background-image: url('./assets/avatar-bg.png');
}

报错：Module not found: Error: Can't resolve 'url-loader'

npm i url-loader -D

再次运行发现可以成功了，并且图片可以正常展示

部署到CDN会牵扯到publicPath

使用webpack5.0配置时webpack.config.js里的语法升级为ES6（没有必要只是完全好奇心驱使做了一下尝试）

1、修改文件名为webpack.config.babel.js

2、npm i @babel/register -D

常见问题FAQ

掘金(还是那只菜鸟) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

常见问题FAQ

掘金(还是那只菜鸟) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式