本文共 4389 字，大约阅读时间需要 14 分钟。

模块开发之webpack使用（三）

前言

由于现在前端越来越复杂,使用的js扩展语言越来越多,比如ts,jsx等,需要将这些开发的模块转换成浏览器成识别的js,webpack就是模块化打包工具.

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 学习地址

使用

安装

npm命令

//全局安装npm install -g webpack//安装到你的项目目录npm install --save-dev webpack

webpack配置文件

一般webpack配置文件是webpack.config.js.

简单的配置

module.exports={    entry:{        main:"./src/app.js"    },    output:{        path:path.resolve(__dirname,"app"),        publicPath:"/",        filename:"[name].js"    }

entry:指定前端入口js文件.

path:打包后的文件存放的地方 publicPath：指定资源文件引用的目录 [name]:这里app __dirname:是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 执行命令:webpack,这条命令会自动引用webpack.config.js文件中的配置选项

webpack命令配置

–progress –colors

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

开启监听模式

开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译

webpack --progress --colors --watch

使用package.json方式打包

package.json里添加scrips:

...."scripts": {    "dev": "webpack-dev-server --config webpack.dev.config.js"  }....

scripts里可添加自定义的脚本,使用npm可执行该脚本 .npm可以引导任务执行.

执行命令

npm run dev

我的常用scripts如下:

"scripts": {        "start": "webpack-dev-server --config webpack.dev.config.js --devtool eval-source-map --progress --colors",        "dev": "npm start",        "build": "webpack --config webpack.prod.config.js --progress --colors",        "test": "echo \"Error: no test specified\" && exit 1"    }

生成源码source-map

生成Source Maps.生成源码方式,在调试时使用.

devtool选项	说明
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

建议

中小型项目开发阶段使用eval-source-map,大项目里使用cheap-module-eval-source-map 配置

module.exports = {  devtool: 'eval-source-map',    ....}

上面是ES6导出配置对象的方式,最终这个配置要应用到webpackConfig.devServer才生效

本地服务器devServer

安装

在开发模式下，DevServer 提供虚拟服务器，让我们进行开发和调试,需要单独安装 .

安装

命令

npm install webpack-dev-server --save-dev

使用:

let webpackConfig =require('./webpack.config')webpackConfig.devServer = {...}

详细介绍

Hot

热模块更新作用。即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果。

这不是和 webpack.HotModuleReplacementPlugin （HMR） 这个插件不是一样功能吗？是的，不过请注意了，HMR 这个插件是真正实现热模块更新的。而 devServer 里配置了 hot: true , webpack会自动添加 HMR 插件。所以模块热更新最终还是 HMR 这个插件起的作用。

host

写主机名的。默认 localhost

inline

设置为true，当源文件改变时会自动刷新页面

port

端口号。默认 8080

historyApiFallback

如果为 true ，页面出错不会弹出 404 页面。

compress

如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。

contentBase

建议绝对路径 .你要提供哪里的内容给虚拟服务器用。

// 单目录contentBase: path.join(__dirname, "public")// 多目录contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

默认情况下，它将使用您当前的工作目录来提供内容。

Open

true，则自动打开浏览器。

overlay

• 如果为 true ，在浏览器上全屏显示编译的errors或warnings。默认 false （关闭）
• 如果你只想看 error ，不想看 warning。

overlay：{    errors：true，    warnings：false}

quiet

true，则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。

publicPath

配置资源文件路径.

// devServer.publicPathpublicPath: "/assets/"// 原本路径 --> 变换后的路径http://localhost:8080/app.js --> http://localhost:8080/assets/app.js

proxy

当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。

proxy: {    '/proxy': {        target: 'http://your_api_server.com',        changeOrigin: true,        pathRewrite: {            '^/proxy': ''        }  }

• 假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
• '/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。
• changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
• pathRewrite：重写路径。匹配 /proxy ，然后变为” ，那么 url 最终为 http：//your_api_server.com/user/list 。

完整配置如下:

webpackConfig.devServer = = {    devServer: {        contentBase: './app',        port: 8081,        inline: true,        open: true,        openPage: '',        hot: true,        proxy: {            "/api/*": {                target: ip,                secure: false,                changeOrigin: true,                pathRewrite: {                    "/api": "/"                }            }        },        overlay: {            warnings: true,            errors: true        }    }}

webpack4 Mode的默认设置生产环境与开发环境

webpack功能强大，有很多独特的功能，但其中一个难点是配置文件。为此,webpack团队改变了这一现状：webpack 4默认不需要配置文件。可以通过mode选项为webpack指定一些默认的配置。mode分为development/production,默认为production。

参考:

转载地址：https://chenyuan.blog.csdn.net/article/details/80732491 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！