webpack配置指南

时间:2021-1-18 作者:admin

本篇文章主要配置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’

npm install webpack-cli@3.3 -D

发现可以运行了

结果:

补充:

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

终端运行:npm start

输出:

第二步 基础文件配置

新建文件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这个文件

第三步 loader使用之-ES6 babel

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

运行结果:

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

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

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 压缩
    },

第五步 生产环境和开发环境配置 dev-tool使用

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

配置:
devtool: ‘cheap-module-source-map’,

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

第六步 引入框架如React

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-module less css)

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

style-loader

css-loader

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

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

第八步 引入第三方组件库配置(antd)

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上

部署到CDN会牵扯到publicPath

其他

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

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

2、npm i @babel/register -D

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。