2019-09-12 webpack学习

1. 文件入口、出口路径配置

首先，webpack是建立在nodejs上面的工具，webpack只负责编译，别的需要靠nodejs的api来帮忙。nodejs要搬移任何的文档都要靠一个叫path的api来做，所以在webpack.config.js中用require的方式来引入path的模块。然后在module.exports里一开始加入context这个属性，里面使用path.resolve这个方法来指定一开始的路径。 context: path.resolve(__dirname, ‘src’),

__dirname在nodejs里代表的一个特殊变量，指的是当前执行文件所在目录的完整目录位置，然后指定第二个参数，从src资料夹开始找文件。如果想输出不是在dist文件夹内，可以在output中重新指定路径：

var path = require('path');
module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'App'), //指定打包路径为App
        filename: 'index-bundle.js',
    }
}

package.josn中scripts：

"dev": "webpack --mode development --watch", //开发环境，不压缩代码 watch自动监听，保存后自动编译
 "build": "webpack --mode production" //线上，文件编译后压缩

watch指令可以帮助我们监控js，只要有js文件有变动就会自动帮我们执行编译，执行相关watch命令后，会发现命令行中webpack虽然编译了，但是执行却没有中断，因为webpack是watch的状态。 mode未设置：意思就是webpack在执行编译的时候有production（上线版本，需要将档案给压缩和优化）和development（开发中，只编译）状态。

webpack4默认是production，所以在不设定mode的情况下watch会执行production功能，但是这样不太好，因为开发中的时候你每次执行watch就除了帮你编译还执行压缩和优化，太消耗资源，而且会占太多电脑记忆，所以日常开发使用development模式。避免在执行的时候消耗不必要的资源。

2. plugins插件

插件是 webpack 的支柱功能，目的在于解决 loader 无法实现的其他事。

未配置html文件入口，安装npm install --save-dev html-webpack-plugin

webpack.config.js中

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
  plugins: [
        new HtmlWebpackPlugin()
    ]

HTMLWebpackplugin会在打包结束后，自动编译可自动在dist下生成index.html文件，并把打包生成的js文件自动引入html中。但是生成的html并没有dom操作生成的root的div标签，因此可以配置html为模板文件： new HtmlWebpackPlugin({template: './src/index.html'})

3. entry 与 output基本配置

entry 和 output打包多个文件时的配置：默认output出口main.js entry写一个字符串entry:'/src/index.js'等价为写一个对象：对象的键main对应打包生成的文件名

entry:{
    main:'/src/index.js'
}

如果配置两个入口文件：

entry:{
    main:'./src/index.js',
    sub:'./src/index.js'
}

输出一个出口文件：

output: {
    path: path.resolve(__dirname, 'dist'),//将绝对路径转为相对路径
    filename: 'index.bundle.js'//输出文件
    }

将会输出如下错误：

image

打包错误，因为打包是多个文件，main.js和sub.js打包后都会起名叫index.bundle.js，这样的话名字就冲突了。解决这个问题，把filename名称替换为占位符，output中的占位符可以支持几个这样的配置内容，如hash 、name。如：filename: '[name].js' name为打包entry对应的key值。如此配置之后，在打包的时候，打包会被放在index.js文件里，main.js中输出，第二次打包会被打包到sub.js里，打包后结果： dist目录下会打包出mian.js和sub.js。同时webpack会自动把打包生成的main.js和sub.js放在index.html中：

image

publicPath 打包完的文件index.html文件给后端，作为后端入口文件，js文件上传到CDN域名下面，希望地址前多一个CDN地址域名，比如传递到src="http://cdn.com/main.js"",希望打包完成后注入到html中的js多带cdn.com的域名，现在手动去改肯定不行，可以在webpack.config.js中改一个配置，在 output中配置publicPath:'http://cdn.com.cn',修改后，重新运行打包，dist/index.html中在所有引入的js都会加入该地址。

image

4. sourceMap的配置

sourceMap是shong么？

当我们代码写错后，打包运行，在console控制台会有错误提示，但提示的是错误在打包之后的文件位置，而开发阶段，最重要的是错误定位到原文件，sourceMap是一个映射关系，知道dist/main.js文件出错位置在原文件index.js文件中的位置。

<details style="box-sizing: border-box; caret-color: rgb(36, 41, 46); color: rgb(36, 41, 46);"><summary style="box-sizing: border-box;"> sourceMap使用</summary></details>

HMR Hot Module Replacement热模块更新

写这样一个例子，引入css文件，界面动态渲染dom元素，每次修改css中的样式，界面都会重新刷新，之前添加的dom元素也都不存在了，为了使界面dom元素保留，只刷新样式文件，就要用到HMR了，通过HMR简化流程。

使用

    devServer: {
        hot:true, // 让webpack devServer开启HMR功能
        hotOnly:true, // 即便是HMR功能没有生效，也不让浏览器自动刷新
        },

引入插件：

const webpack=require('webpack');
plugins: [
        new webpack.HotModuleReplacementPlugin(),// HMR开启
    ],

如果不使用HMR，有两个js文件时，只修改一个，会重新请求数据，整个页面都会刷新，之前操作的一些数据也不会被保存下来。

如css-loader中底层实现了HMR代码的编写，react等都不需要写HMR代码,内置实现了HMR。而通过脚手架工具creact-react-app 生成的工程会默认的webpack的配置都已经配置好了，配置文件非常全，但是把webpack相关的配置文件隐藏起来了，脚手架提供了eject命令，可以将隐藏的webpack配置项展现出来，执行npm run build/start等命令时会调用这些隐藏的配置文件，来进行项目的打包，生成可以运行的代码。

总结

虽然webpack大多不需要我们从零开始一点点去配置，但是理解其各配置项功能及打包原理是很有必要的，便于以后操作修改。