//方式一
import mondaylib from 'mondaylib'
//方式二
const mondaylib = require('mondaylib')
//方式三
require(['mondaylib'], function(){
})
复制代码

const path = require('path');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'mondaylib.js',
        //此处配置libraryTarget，umd表示支持commonJS这种语法
        libraryTarget: 'umd'
    }
}
复制代码

<script src="mondaylib.js"></script>
复制代码

const path = require('path');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'mondaylib.js',
        //将打包生成的代码挂载到页面的全局变量上
        library: 'mondaylib',
        //此处配置libraryTarget，umd表示支持commonJS这种语法
        libraryTarget: 'umd'
    }
}
复制代码

import _ from 'lodash';
//mondaylib这个库原先已经引入过lodash这个库
import mondaylib from 'mondaylib';
复制代码

const path = require('path');
module.exports = {
    externals: ["lodash"]
}
复制代码

module.exports = {
    externals: {
        // 表明lodash这个库如果在commonjs这种环境下被使用，那么要求lodash加载的时候必须叫做lodash
        lodash: {
            commonjs: 'lodash'
        }
    }
}
复制代码

//✔可使用方式：命名为lodash
import lodash from 'lodash'
//✘不可使用方式：未命名为lodash
import _ from 'lodash'
复制代码

npm install workbox-webpack-plugin --save-dev
复制代码

const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
    plugins: [
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ],
}
复制代码

if('serviceWorker' in navigator){
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('service-worker registed');
            }).catch(error => {
                console.log('service-worker regist error');
            })
    })
}
复制代码

class Greeter{
    greeting: string;
    constructor(message: string){
        this.greeting = message;
    }
    greet(){
        return "Hello, " + this.greeting;
    }
}
let greeter = new Greeter("world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.click = function(){
    alert(greeter.greet());
}
document.body.appendChild(button);
复制代码

npm install ts-loader typescript -D
复制代码

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')
    }
}
复制代码

{
    "compilerOptions": {
        "outDir": "./dist",
        "module": "es6",
        "target": "es5",
        "allowJs": true
    }
}
复制代码

npm install @types/lodash --save-dev
复制代码

module.exports = {
    devServer: {
        proxy: {
      '/react/api': {
        target: 'http://www.mondaylab.com',
        //实现对https网址的请求转发
        secure: false,
        bypass: function(req, res, proxyOptions){
          //如果请求的内容是一个html地址，那么就直接返回根路径下index.html的内容
          if(req.headers.accept.indexOf('html') !== -1){
            console.log('Skipping proxy for browser request');
            return './index.html';
            // return false; //表示如果遇到html请求，那么该给你返回什么就返回什么
          }
        },
        //在前端请求时写header.json，webpack会间接的帮我们拿到demo.json的数据（请求转发】）
        pathRewrite: {
          'header.json': 'demo.json'
        },
        //如果有一些网站做了防爬虫，那么我们可能没办法进行跨域。需要进行如下配置，就可以突破对origin的限制
        changeOrigin: true,
        // 在请求头中自定义一些内容
        headers: {
          host: 'www.mondaylab.com',
          //在做请求转发时模拟一些登录等操作
          cookie: 'gfhgfh'
        }
      }
    }
    }
}
复制代码

module.exports = {
  devServer: {
        //第一种方式
    historyApiFallback: true,
        /*等同于
        historyApiFallback: {
            rewrites: [{
                from: /\.*\/,
                to: '/list.html/'
            }]
        }
        */
        /*第二种方式
        historyApiFallback: {
            rewrites: [{
                from: /abc.html/,
                //进行转换，当访问abc.html时，会把list.html的内容展示出来
                to: '/list.html/'
            }]
        }
        */
        /*第三种方式：更为灵活
        historyApiFallback: {
            rewrites: [{
              //表明在做页面的替换时，通过一个函数function的形式，结合context的一些参数
              //做一些js的逻辑放在里面，来决定最终它跳转到哪
                from: /^\/(libs)\/.*$/,
                to: function(context){
                  return '/bower_components' + context.match[0];
                }
            }]
        }
        */
  }
}
复制代码

npm install eslint --save-dev
复制代码

npx eslint --init
> Use a popular style guide 使用通用的代码检测模板
> Airbnb
> Do you use React 根据自身需求填y或者n
> Javascript
> Would you like to install them now with npm? Y
复制代码

npx eslint src
复制代码

npm install eslint-loader --save-dev
复制代码

module.exports = {
    devServer: {
      /*当我们运行webpack做打包时，
      一旦代码出现规范问题，
      webpack将会在浏览器上弹出一个报错层来提示我们*/
      overlay: true  
    },
    module: {
        rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: ['babel-loader', 'eslint-loader']
    }]
    }
}
复制代码

module.exports = {
    module: {
        rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: ['babel-loader', {
                loader: 'eslint-loader',
                options: {
                    //如果代码有一些比较浅显的问题，eslint-loader将会帮助我们自动修复
                    fix: true,
                    //降低eslint在打包过程中对项目性能的损耗
                    cache: true
                },
                //强制eslint-loader先执行
                fore: 'pre'
            }]
    }]
    }
}
复制代码

module.exports = {
    module: {
        rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/,
            //或者以下这种方式->include
      //include: path.resolve(__dirname, '../src'),
      use: [{
        loader: 'babel-loader'
      }]
    }]
    }
}
复制代码

module.exports = {
  resolve: {
    extensions: ['js', 'jsx'],
    /**
     * 1.当你只引入一个目录时，比如 import Child from './child/child' ，
     * 这个时候webpack不知道我们具体是要引入哪个文件，
     * 那么会先去找index文件，如果找不到，那它会继续去找child文件
     */
    mainFiles: ['index', 'child'],
    /**
     * alias, 顾名思义是别名。
     * 比如，想要将某个文件的引入方式改为自己的名字
     * import Child from './Child' -> import Child from 'monday'
     */
    alias: {
      monday: path.resolve(__dirname, '../src/Child'),
    }
  },
}
复制代码

const path = require('path');
const webpack = require('webpack');
module.exports = {
    mode: 'production',
    entry: {
        //此处填写我们想要单独进行打包的第三方库名
        vendors: ['react', 'react-dom', 'lodash']
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, '../dll'),
        /*用library把第三方模块里面的所有代码，
        通过全局变量的方式暴露出去*/
        library: '[name]'
    },
    plugins: [
        /*暴露完成之后，借助DllPlugin插件对暴露出来的模块代码进行分析，最终生成manifest.json的文件 */
        new webpack.DllPlugin({
            //对生成的vendors的库进行DllPlugin的分析(文件映射)
            name: '[name]',
            // 分析结果所放的路径，分析之后结合全局变量，在common.js中进行配置
            path: path.resolve(__dirname, '../dll/[name].manifest.json')
        })
    ]
}
复制代码

npm install add-asset-html-webpack-plugin --save
复制代码

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    entry: {
        main: './src/index.js',
        plugins: [
            new HtmlWebpackPlugin({
                template: 'src/index.html'
            }), 
             /**
             * 指的是要往HtmlWebpackPlugin插件生成的index.html中添加一些内容
             */
            new AddAssetHtmlWebpackPlugin({
                filepath: path.resolve(__dirname, '../dll/vendors.dll.js')
            }),
            /**
             * 1.使用DllReferencePlugin插件，
             * 这个插件会到'../dll/vendors.manifest.json'中找第三方模块的映射关系，
             * 如果能找到映射关系，那么webpack就会知道，这个第三方模块没有必要再打包进来了，
             * 直接从vendors.dll.js中拿过来用就可以了
             * 2.如果发现并不再映射关系里面，那么才会再到node_modules中去找
             * 
             */
            new webpack.DllReferencePlugin({
                manifest: path.resolve(__dirname, '../dll/vendors.manifest.json')
            })
        ]
    }
}
复制代码

{
  "scripts": {
    "build:dll": "webpack --config ./build/webpack.dll.js"
  }
}
复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
    //引入多个入口文件
    main: './src/index.js',
    list: './src/list.js'
  },
    plugins: [
        new HtmlWebpackPlugin({
    template: 'src/index.html',
    filename: 'index.html',
    //chunk表明这些html文件要引入的文件有哪些
    chunks: ['runtime', 'vendors', 'main']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            filename: 'list.html',
            chunks: ['runtime', 'vendors', 'list']
        })
    ]
}
复制代码