Webpack实战配置案例（一）

Library的打包：库代码通过webpack进行打包

在 webpack.config.js 中：

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    externals: 'lodash',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js',
        library: 'root', //支持通过<scritp src=ilibrary. js'></script> 标签引入，在全局变量增加一个root变量
        libraryTarget: 'umd' //别人用的时候，通过任何形式引入库都可以，比如AMD，CMD，ES MODULE，Commonjs
        
        // library: 'root',//打包生成全局变量root
        // libraryTarget: 'this' //把全局变量root挂载到this上，可以填umd，this，window,global
        
        // externals: {
        //     lodash:{
        //         root：'_', //是用script标签引入进来的，必须在全局注入一个 _ 变量，下面的library才能正常执行
        //         commonjs:'lodash',//在用commonjs规范引入是，名字必须是lodash
        //     }

        // }

    }
}

在 package.json 中：

"main": "./dist/library.js", //最终要给别人使用的

在 npm 官网注册一个账号，在命令行输入 ：

//添加用户名和密码
npm adduser 
//把项目发布到npm官网上
npm publish
//但别人用你发布的库时
npm i + 库名 

详细请看官方文档：externals author-libraries

---

Progressive Web Application：在webpack中配置pwa

渐进式网络应用程序，PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。线上环境时才用到pwa,开发时不需要

安装：

//模拟服务器
npm i http-server -D
//添加 workbox-webpack-plugin 插件，然后调整 webpack.config.js 文件
npm install workbox-webpack-plugin --save-dev

在 package.json 中：

"scripts": {
 +   "start": "http-server dist",//在dist目录下运行http-server服务
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },

线上环境时才用到pwa,开发时不需要，只需要改 webpack.prod.js 。

在 webpack.prod.js 中：

const WorkboxPlugin = require('workbox-webpack-plugin');
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].chunk.css'
        }),
+        new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true
        })
    ],

在业务代码 index.js 中使用pwa

console.log('hello, haiyang');

if ('serviceWorker' in navigator) { //如果浏览器支持serviceWorker，就执行以下代码
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {//注册成功
                console.log('service-worker registed');
            }).catch(error => {//没注册成功
                console.log('service-worker register error');
            })
    })
}

详细请看官方文档：progressive-web-application

---

TypeScript 的打包配置

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通 JavaScript 代码。这篇指南里我们将会学习是如何将 webpack 和 TypeScript 进行集成。

安装：
npm install --save-dev typescript ts-loader

在 webpack.config.js 中：

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.tsx',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

在项目根目录下创建 tsconfig.json 文件：

{
    "compilerOpitons": {
        "outDir": "./dist",
        "module": "es6",//模块引入的方式
        "target": "es5",//转换为es5，在大部分浏览器都能运行
        "allowJs": true, //在typescript中允许引入js文件
    }
}

在从 npm 安装 third party library(第三方库) 时，一定要记得同时安装此 library 的类型声明文件(typing definition)。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。在使用时，哪有错可以有警告提示，方便改错。

安装：

//在typescript里用loadah
npm install --save-dev @types/lodash

详细请看官方文档：typescript

---

使用 WebpackDevServer 实现请求转发

安装：

//向服务器发送axios请求
npm i axios -D

在 index.js 中：

componentDidMount() {
        axios.get('/react/api/header.json')
            .then((res) => {
                console.log(res);
            })
    }

在 webpack.config.js 中：

devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true,
+        proxy: {//开发时方便接口转发，线上不用
            '/react/api': {//访问 /react/api 时，代理到 target 上
                target: 'https://www.dell-lee.com',
                secure: false,//对https协议的网址的请求的转发
     //   拦截，请求的是html,不走代理直接返回  /index.html文件          
    //bypass: function(req, res, proxyOptions) {
      //    if (req.headers.accept.indexOf('html') !== -1) {
      //      console.log('Skipping proxy for browser request.');
       //     return '/index.html';
       //   }
     //   },
                pathRewrite: {
                    'header.json': 'demo.json' //最后拿的是demo.json的数据
                },
                changeOrigin: true,//解决网站对接口的限制
                headers: {//变更请求头
                    host: 'www.dell-lee.com',
                }
            }
        }
    },

详细请看官方文档：devserverproxy

---

WebpackDevServer 解决单页面应用路由问题

期望效果：

• 当用户访问根路径时，会访问home组件的内容
• 当用户访问/list路径时，会访问list组件的内容

实际上，当我们去访问localhost:8081/list这个地址的时候，webpackDevServer会默认为你要访问服务器上的一个list页面。但我们的项目中只有一个index.html页面，并不存在list页面。所以它会提示你：Cannot GET /list （页面不存在）

我们可以使用webpackDevServer中的 historyApiFallback 配置来解决此问题：

安装：

npm i react-router-dom --save  //对应的react的路由模块，vue也可以使用相应的模块vue-router

在 webpack.config.js 中：

devServer: {
        //配置只在开发时有效，上线时后端也需配置
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true,
+        historyApiFallback: true,
        //historyApiFallback: {
         // rewrites: [//访问任何路径都展示index.html页面
          //  { from: /\.*/, to: '/index.html' },
          //]
        //},
        proxy: {
            '/react/api': {
                target: 'https://www.dell-lee.com',
                secure: false,
                pathRewrite: {
                    'header.json': 'demo.json'
                },
                changeOrigin: true,
                headers: {
                    host: 'www.dell-lee.com',
                }
            }
        }
    },

historyApiFallback: true 代表在使用单页面应用的时候，需要设置此参数，代表如果访问除根路径以外的地址，最终都会转向去请求根路径。

注： historyApiFallback只是在我们的开发环境中（本地）有效，一旦代码上线，就会再次出现访问页面找不到的问题。这时就需要后端小伙伴配合，仿照webpack-dev-server的配置，在nginx或apache对应的服务器上做它的一些配置，再进行访问。