webpack成神之路（五）

1. 现在我们试一下多页面配置

• 我们在src下建立两个js。分别为index.js ，a.js 里面只console.log一句话。然后我们在webpack.config.js中配置

let path = require('path')
module.exports={
    mode: 'production',
    entry:{
        home: './src/index.js',
        other: './src/a.js'
    },
    output:{
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    }
}

• 然后我们 npm run build 打包，可以 看到打包出来对应的两个js

  
  image.png

2. 现在只是有js。我们还需要页面。我们用前面了解的html-webpack-plugin

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    mode: 'production',
    entry:{
        home: './src/index.js',
        other: './src/a.js'
    },
    output:{
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',   // 不能用[name].html，需要用两次
            chunks: ['home']  // chunks 只打包home对应的js
        })
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'other.html',
            chunks: ['other']  
        })
    ]
}

• npm run build打包看结果,生成的html文件达到了多页面效果
  image.png

3. 接下来我们说一下source-map. 主要在webpack.config.js中配置说明一下。

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    mode: 'development',
    entry:{
        home: './src/index.js'
    },
    output:{
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',  
            chunks: ['home'] 
        }),
    ],
    devServer:{
        port: 3333,
        open: true
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src'),
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    }
}

• 然后我们在index.js 中故意把console.log写错。npm run serve启动服务
  index.js

console.log('我是index.js')

class A{
    constructor(){
        console.lo('wo shi a')
    }
}

let a = new A();

image.png

• 然后我们点击错误提示，可以跳转到对应出错的地方

  
  image.png

• 我们可以配置多种soucemap文件

1. devtool: 'source-map', // 会打包出map文件，会指向出错的行列， 大而全

   
   image.png

• 我们运行打包后的index.html 页面会提示具体出错的原文件位置

  
  image.png

2. devtool: 'eval-source-map', // 不会产生map文件，也会显示行列

   
   image.png

• 运行html文件点击控制台错误也会跳转到出错原文件位置

3. devtool: 'cheap-module-source-map', // 产生map文件，没有调试功能

   
   image.png

4)devtool: 'cheap-module-eval-source-map', //不会产生map文件，不会产生列信息

image.png

• 控制台报错可以定位到原文件出错的行，但是列不行

4. 随着项目大了，后端与前端联调，我们不需要每一次都去打包，这样特别麻烦，我们希望的场景是，每次按保存键，webpack自动为我们打包，这个工具就是watch！

• 因为watch是webpack自带的插件，所以我们只需要配置就行了

image.png

• 现在我们只要一修改代码就会自动打包了，我们在运行打包后的index.html，也可以实时的看到效果。

• 但是还是有点问题。 如果我们保存的很快，大会打包多次，没有必要，这时我们就需要配置一下watchOptions

  
  image.png

5. 现在我们在了解两个插件 分别 是copyWebpackPlugin(把文件拷贝到打包文件下，比如文档等)， bannerPlugin（webpack内置的插件，用于版权说明）

• 首先我们按照cnpm i copy-webpack-plugin --save-dev

• webpack.config.js如下配置。打包之后可以看到txt文件原封不动的拷贝到了dist/doc/目录下；

  
  image.png

• 版权声明插件由于是内置的不用按照额外的插件，我们直接引入webpck. 然后new webpack.BannerPlugin('我是版权声明')

  
  image.png

• 可以看到打包后的js文件前面都出现了声明的版权内容