webpack是一个现代JavasScript应用程序的模块打包器(module bunder)
安装：npm install --save-dev
webpack4最新版本 npm install --save-dev webpack@4
新增依赖 webpack-cli npm install --save-dev webpack-cli
webpack.config配置说明，已经这个文件来执行webpack
const path = require('path');
module.exports = {
//entry表示入口，可以是字符串数组或对象 webpack执行构建的第一步将从entry开始，可以抽象成输入
entry: './app/entry',//只有一个入口，入口只有一个文件
entry: ['./app/entry1','./app/entry2'],//只有一个入口，入口有两个文件夹
entry: { //有两个入口
a: './app/entry-a',
b: ['./app/entry-b1','./app/entry-b2']
},
output: {
//输出文件存放的目录，必须是string类型的绝对路径
path: path.resolve(__diename,'dist'),
//输出文件的名称
filename: 'bundle.js',// 完整的名称
filename: '[name].js',//在配置了多个entry时，通过名称模板为不同的entry生成不同的文件名称
filename: '[chunkhash].js',//根据文件内容的hash值生成文件的名称，用于浏览器长时间缓存文件
//发布到线上的所有资源URL前缀，为string类型
publicPath: '/assets/', //放到指定目录下
publicPath: '', //放到根目录下
publicPath: 'https://cdn.example.com/', //放到CDN上
//导出库的名称，为string类型
//不填它时，默认的输出格式是匿名的立即执行函数
library: 'MyLibrary',
//导出库的类型，为枚举类型，默认是 var
//可以是umd、umd2、commonjs2、commonjs、amd、this、var、assign、window、global、jsonp
libraryTarget: 'umd',
//是否包含有用的文件路径信息生成的代码里，为boolean类型
pathinfoL:true,
//附加chunk的文件名称
chunkFilename: '[id].js',
chunkFilename: '[chunkhash].js',
//jsonp异步加载资源时的回调函数名称，需要和服务端搭配只用
jsonpFunction: 'myWebpackJsonp',
//生成的 Source Map 文件的名称
sourceMapFilename: '[file].map',
//浏览器开发行和工具里显示的源码模块名称
devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
//异步加载跨域的资源时使用的方式
crossOriginLoading: 'use-credentials',
crossOriginLoading: 'anonymous',
crossOriginLoading: false,
},
module: {
rules: [ // 配置loader，这里也可以用loader替代rules
{
test: /\.jsx?$/, //正则匹配命中要使用loader的文件
include: [ // 只会命中这里面的文件
path,resolve(__dirname,'app')
],
exclude: [ //忽略这里面的文件
path.resolve(__dirname,'app/demo-files')
],
use: [ //使用哪些loader,有先后次序，从后向前执行
'style-loader', //直接使用loader的名称
{
loader: 'css-loader',
options: { //向html-loader传递一些参数
}
}
]
},
],
noParse: [ //不用解析和处理的模块
/special-library\.js$/ //用正则匹配
],
},
// 配置插件
plugins: [
],
resolve: { //文件查找目录
modules: [ //寻找模块的根目录，为array类型，默认以 node_modules为根目录
'node_modules',
path.resolve(__dirname,'app')
],
extensions: ['.js','.json','.jsx','.css'], //模块的后缀名 配置程序可以自行补全哪些文件后缀
alias: { //模块别名配置，用于映射模块
//将‘module’映射成‘new-module’，同样，‘module/path/file’也会被映射成‘new-module/path/file’
'module': 'new-module',
//使用结尾符号$后，将‘only-module’映射成‘new-module’，
//但是不像上面的，‘module/path/file’不会 被映射成‘new-module/path/file’
'only-mosules$':'new-module',
},
alias: [ //alias还支持使用数组类更详细地进行配置
{
name: 'module', //老模块
alias: 'new-module', //新模块
// 是否只映射模块，如果是true，则只有‘module’会被映射；如果是false，则'module/inner/path'也会被映射
onlyModule: true
}
],
symlinks: true, //是否跟随文件的软连接去搜索模块的路径
descriptionFiles: ['packsge.json'], // 模块的描述文件
mainFilelds: ['main'], //模块的描述文件里描述入口的文件的字段名
enforceExtension: false, //是否强制导入语句写明文件后缀
},
//输出文件的性能检查配置
performance: {
hints: 'warning', //有性能问题时的输出警告
hints: 'error', //有性能问题时输出错误
hints: false, // 关闭性能检查
maxAssetSize: 200000, //最大文件的大小（单位为bytes）
maxEntrypointSize: 400000, //最大入口文件的大小（单位为bytess）
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js') ;
}
},
devtool: 'source-map', //配置source-map
context: __dirname, //webpack使用的根目录，string类型必须是绝对路径
// 配置输出代码的运行环境
target: 'web', //浏览器，默认
target: 'webworker', //WebWorker
target: 'node', //Node.js使用`require`语句加载 Chunk代码
target: 'async-node', //Node.js异步加载 Chunk代码
target: 'node-webkit', // nw.js
target: 'electron-main', // electron，主线程
target: 'electron-renderer', // electron，渲染线程
externals: { //其他类库或api
jquery: 'jQuery'
},
status: { //控制台输出日志
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true,
},
devServer: { // DevServer相关的配置
proxy: { // 代理到后端服务接口
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname,'public'), //配置 DevServer HTTP服务器的文件根目录
compress: true, //是否开启Gzip压缩
historyApiFallback: true, //是否开发 HTML5 History API 网页
hot: true, //是否开启模块热替换功能
https: false, // 是否开启 HTTPS 模式
},
profile: true, //是否捕捉webpack构建的性能信息，用于分析是什么原因导致构建性能不佳
cache:fasle, // 是否启用缓存啦提升构建速度
watch: true, //是否开始
watchOptions: { // 监听模式选项
// 不监听的文件或文件夹，支持正则匹配。默认为空
ignored: /node_modules/,
// 监听到变化后，等300ms再执行，截流，防止文件更新太快导致重新编译频率太快，默认为300ms
aggregateTimeout: 300,
// 不停地询问系统指定的文件有没有发生变化，默认每秒询问1000次
poll: 1000
},
}
升级到webpack4常见错误：
1、Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.
webpack4中UglifyJsPlugin被废除，需要安装新的插件uglifyjs-webpack-plugin进行替换
npm install uglifyjs-webpack-plugin --save-dev，在webpack.config中删除UglifyJsPlugin段，添加UglifyJsPlugin
配置详情2、Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
删除CommonsChunkPlugin ，用splitChunks替代，
配置详情3、compilation.mainTemplate.applyPluginsWaterfall is not a function
npm install html-webpack-plugin@latest --save-dev
4、Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0
5.TypeError: webpack.optimize.DedupePlugin is not a constructor
删除DedupePlugin
6、Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.
更新版本 npm install offline-plugin --save-dev
TypeScript的打包:
npm install --save-dev typescript ts-loader
tsc --init
tsconfig.json
配置详情
常用命令
webpack //对项目进行打包
webpack --watch // 自动监控文件的改变
webpack --display-modules //打包时显示隐藏的模块
webpack--display-chunks //打包时显示chunks
webpack --display-error-details //显示详细错误信息
webpack -w #提供watch方法，实时进行打包更新
webpack -p #对打包后的文件进行压缩
webpack -d #提供SourceMaps，方便调试
webpack --colors #输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile #输出性能数据，可以看到每一步的耗时