webpack打包生成的map文件_webpack4知识整理（五）多文件处理、source-map、watch、插件...

多文件处理，webpack.config.js的entry要以对象的方式引入多个

输出文件名要以变量的方式进行配置

如果要一并输出多个HTML页面，在plugins中也要实例化多次html-webpack

还要考虑到每个HTML要引入的chunks，需要什么代码块就配置那个代码块

npm install -D webpack webpack-cli html-webpack-plugin

let path = require('path')

let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

mode:'development',

entry:{

home:'./src/home',

other:'./src/other'

},

output:{

filename:'[name].js',

path:path.resolve(__dirname,'dist')

},

plugins:[

new HtmlWebpackPlugin({

template:'./src/index.html',

filename:'home.html',

chunks:['home']

}),

new HtmlWebpackPlugin({

template: './src/index.html',

filename: 'other.html',

chunks: ['other']

})

]

}

source-map的处理

npm i -D @babel/core @babel/preset-env babel-loader webpack-dev-server

在webpack配置文件里面加入devtool属性，如果报错，会映射到报错的行和列

let path = require('path')

let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

mode:'production',

entry:{

home:'./src/home'

},

devtool:'source-map',

output:{

filename:'[name].js',

path:path.resolve(__dirname,'dist')

},

plugins:[

new HtmlWebpackPlugin({

template:'./src/index.html',

filename:'index.html'

})

]

}

执行打包的时候会单独打包一个以   .map为结尾的文件一并在打包目录中

将webpack的devtool属性的值改为eval-source-map就不会单独打包一个文件，也会定位报错的行和列

devtool:'eval-source-map'

devtool属性还有两个值分别是：

cheap-module-source-map  打包后生成map文件，不显示列

cheap-module-eval-source-map 打包后不生成map文件  集成在打包后的JS文件中  不显示列

给webpack增加 watch属性   属性值设置为 true

module.exports = {

... ...

watch:true,

watchOptions:{

poll:1000,

aggcreateTimeout:500,

ignored:/node_modules/

},

... ...

}

poll:1000,  代表每秒，监控多少次

aggcreateTimeout:500,   键盘输入后多少秒，不进行打包监控处理

ignored:/node_modules/   排除被监控的目录

小插件

清除打包目录文件的插件

npm install -D clean-webpack-plugin

let CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {

... ...

plugins:[

... ...

new CleanWebpackPlugin({})

]

}

此时在进行打包，之前的旧的打包好的文件就会被删除掉，然后再重新生成

复制文件的插件

npm install -D copy-webpack-plugin

new CopyWebpackPlugin([

{from : './source',to:'./'}

])

此时就将source目录下全部文件，复制到打包的目录中了

可以在打包的文件最开始加入声明信息

new Webpack.BannerPlugin('make 2019 auth Li ')