平常工做webpack必备姿式（二）

时间 2020-03-16

标签平常 webpack 必备繁體版

原文原文链接

前言

在深刻看下面内容以前，但愿你们阅读了我上一篇文章平常工做webpack必备姿式（一），本篇宗旨是进一步探讨webpack的平常使用，而不是入门教学。html

打包多页应用

webpack一般是配合诸如VUE框架打包单页面应用的，若是你想用他打包多页面应用，那咱们如何实现这个骚操做呢？java

思路以下：node

打包页面，动态在页面中插入js必须依赖的插件是HtmlWebpackPlugin，同时指定动态插入页面的js入口文件。
入口文件由一个入口变成多个，指定入口文件的方式也从字符串变成对象
出口文件从一个出口变成多个出口

基于上述思路咱们来看一下webpack配置文件的最终配置：webpack

let path =  require('path'); //webpack是node写出来的，path是node的语法
let HtmlWebpackPlugin = require('html-webpack-plugin'); //HTML编译插件

module.exports = {    

    mode:'development', //编译环境改为是development（开发模式）
    entry:{
        aaa:'./src/aaa.js',    //第一个入口文件
        bbb:'./src/bbb.js'    //第二个入口文件
    },

    output:{                    //编译后的目录
        filename:'[name].js',    //编译后的文件名称，name动态有入口js文件生成
        path:path.resolve(__dirname,'dist'),    //编译后的路径，必须是绝对路径        
    },

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //须要编译的html源文件，一个足以，由于内容是入口js渲染而成
            filename:'aaa.html',    //编译后的文件名        
            chunks:['aaa']        //入口js文件         
        }),
        new HtmlWebpackPlugin({
            template:'./src/index.html', //须要编译的html源文件
            filename:'bbb.html',    //编译后的文件名        
            chunks:['aaa','bbb']    //能够指定多个入口js文件      
        }),
    ],    
    
}

在咱们的项目中新建入口文件aaa.js和bbb.js文件后进行测试。最终编译的效果如图所示：
web

source-map的做用

在刚开始用webpack的时候有没有遇到过代码运行出错，却没有办法追寻到源码出错的点？这个时候source-map就发挥做用了。source-map意思是"源码映射"，顾名思义它的做用是就是能帮助咱们找到源码出错的地点。npm

//在webpack配置文件中添加这么一行就起到做用了
devtool:'eval-cheap-source-map',

在实际项目使用中，通常开发环境会配置该选项，但部署的时候就得去掉。由于source-map文件比较大，严重影响网页传输效率。和source-map相对应的eval-source-map相对于source-map而言并不会单独产生一个source-map相关的文件，可是也能找到出错点。其它的可配置项诸如cheap-source-map和eval-cheap-source-map则不多用到。json

webpack经常使用插件

clean-webpack-plugin插件：每次编译配置设置为生成新的文件（避免缓存），而之前编译后文件还须要手动删除太麻烦了，有了它就能自动删除以前编译目录的文件。
copy-webpack-plugin插件：假如咱们有文档但愿每次更新后也能编译到输出目录，帮咱们作一个拷贝，用这个就能够。
BannerPlugin是webpack内置功能：咱们看别人文章老是会加一个出处说明，用BannerPlugin能自动帮助咱们在每一个打包的文件开头添加说明字符

首先安装依赖包segmentfault

//BannerPlugin是webpack内置功能,不须要安装
npm install --save-dev clean-webpack-plugin
npm install copy-webpack-plugin --save-dev

webpack配置文件（3个插件的相关配置）后端

let path =  require('path'); //webpack是node写出来的，path是node的语法
let HtmlWebpackPlugin = require('html-webpack-plugin'); //HTML编译插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');


module.exports = {   
    mode:'development', //编译环境改为是development（开发模式）
    entry:'./src/index.js',    //须要编译的源文件目录
    output:{                //编译后的目录
        filename:'bundle.[hash].js',    //编译后的文件名称
        path:path.resolve(__dirname,'dist'),    //编译后的路径，必须是绝对路径
    },
    devtool:'eval-cheap-source-map',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //须要编译的html源文件
            filename:'index.html',         //编译后的文件名            
        }),
        new CleanWebpackPlugin(),
        new CopyPlugin([
          { from: 'doc', to: '' }
        ]),
        new webpack.BannerPlugin('说明字符')
    ],   
}

最终运行效果：
api

跨域解决方案

webpack能够经过代理的方式解决跨域，仅须要配置以下：

//以'/api'的开头的请求都会从新代理到新的域下
devServer: {
        proxy:{
            '/api':'http://***'
        }
    },
    
//假如后端路径不带有'/api'，能够经过pathRewrite将它更改（这里是将它替换）
devServer: {
        proxy:{
            '/api':{
                target:'http://***',
                pathRewrite:{'/api':''}
            }
        }
    },

上述方案（包括网上的用webpack模拟后端数据等）只是在开发阶段试用的跨域方案，部署到线上仍是须要后端来解决跨域问题的。以下列举一下java语言的跨域解决方案：

public class CorsInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, 
            HttpServletResponse response, Object handler) throws Exception {
        if (request.getHeader(HttpHeaders.ORIGIN) != null)
        {
            //跨域解决方案
            response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
            response.addHeader("Access-Control-Max-Age", "3600");
        }
       return true;
    }
}

定义环境变量和区分环境

webpack中的定义插件能够帮咱们定义一些全局变量，用于区分当前环境是线上仍是线下，用法以下：

new webpack.DefinePlugin({
          'env': JSON.stringify('development')
        })
//错误的用法以下所示：
new webpack.DefinePlugin({
          'env': 'development'
        })
//在实际获取变量env的地方直接使用env而无需引用；
//上述错误在于获取env获得的是变量development而不是字符串；
//将development改为字符串也可正常运行（以下），只是感受很奇怪
new webpack.DefinePlugin({
          'env': "'development'"
        })

上述咱们虽然能够定义一些环境变量，可是实际中想要区分线上环境和线下环境还须要借助于webpack-merge

通常在实际开发中区分线上环境和开发环境的作法是定义三个文件：

webpack.base.js 该文件的做用是定义线上和开发环境公共的配置项内容
webpack.prod.js 该文件的做用是定义线上专属的属性好比：将mode定义为'production'，定义一些压缩代码的优化项之类的。
webpack.dev.js 该文件的做用是定义开发环境的属性好比，source-map属性，devServer等等。

文件内容参考以下：

//webpack.base.js文件
let path =  require('path'); //webpack是node写出来的，path是node的语法
let HtmlWebpackPlugin = require('html-webpack-plugin'); //HTML编译插件
let webpack = require('webpack');


module.exports = { 
    entry:'./src/index.js',    //须要编译的源文件目录
    output:{                //编译后的目录
        filename:'bundle.[hash].js',    //编译后的文件名称
        path:path.resolve(__dirname,'dist'),    //编译后的路径，必须是绝对路径
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //须要编译的html源文件
            filename:'index.html',         //编译后的文件名            
        }),
       new webpack.DefinePlugin({
          'env': "'development'"
        })
    ],   
}

//webpack.prod.js文件
var base = require('./webpack.base.js');
var merge = require('webpack-merge');
module.exports = merge(base,{     
    mode:'production'
    //其它优化项
})

//webpack.dev.js文件
var base = require('./webpack.base.js');
var merge = require('webpack-merge');
module.exports = merge(base,{     
    mode:'development', 
    //其它开发配置项内容
})

在package.json文件中经过调用不一样的配置文件来区分线上和开发环境。

scripts: {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack --config webpack.dev.js"
  },

webpack自带优化

webpack在开发环境下会自动帮助咱们作不少代码优化，须要注意的是必定是production环境才能看到优化效果。咱们来看下如下两个例子：

tree-shaking

tree-shaking意思是树木只要一摇晃，无用的或者枯黄的叶子就会离开，也就暗示咱们代码中无效的代码就会自动被优化掉。来看一下案例：

//在一个文件里建立如下两个函数
//bb.js
let sum = function(a,b){
    return a+b+" ssssssssss";  //ssssssssss是为了在测试的时候搜索验证效果
}

let minus = function(a,b){
    return a-b+"mmmmmmmm";  //同理mmmmmmmm是为了在测试的时候搜索验证效果
}

export default{
    sum,minus
}

//在另外一个文件中引用上面文件，而且在production环境打包
import calc from './bb.js'
console.log(calc.sum(12,23));

打包结果为只有bb.js文件里面的sum函数，却没有minus函数。缘由是由于咱们的代码里面只用到了sum函数，minus函数由于没有用到就自动帮咱们去除了。

做用域提高

webpack他能自动作一些计算上的优化处理，例如如下案例：

let a=1;
let b=2;
let c=3;
console.log(a+b+c+"做用域提高") //"做用域提高"是为了在测试的时候搜索验证效果

通过编译后最终的代码效果是：

console.log("6做用域提高")

结束语

webpack经常使用的知识暂且介绍到这里，后续将会根据webpack版本的更新，带来续更！！