模块开发之webpack使用（三）

模块开发之webpack使用（三）

前言

由于现在前端越来越复杂,使用的js扩展语言越来越多,比如ts,jsx等,需要将这些开发的模块转换成浏览器成识别的js,webpack就是模块化打包工具.
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
学习地址webpack中文文档v3.3.0版本
webpack中文文档v2.2.0版本
webpack中文文档v4.12.2版本

使用

安装

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.publicPath
publicPath: "/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。

参考:
入门Webpack，看这篇就够了
菜鸟教程