简介
实质上，webpack是一个古代JavaScript应用程序的动态模块打包工具。当 webpack 解决应用程序时，它会在外部构建一个依赖图，此依赖图会映射我的项目所需的每个模块，并生成一个或多个bundle官网：https://webpack.docschina.org/webpack4的新个性
1. mode属性：development或production（不设置mode时，默认为production） 如：webpack --mode development/production 针对development（开发模式）提供的个性： 浏览器调试工具 正文，开发阶段的具体谬误日志和提醒 疾速和优化的增量构建机制 针对production（生产模式）提供的个性： 开启所有的优化代码 更小的bundle大小 去除掉只在开发阶段运行的代码 Scope hoisting（把多个bundle放进一个大的闭包里，放慢整个代码的运行速度）和Tree-shaking（没有被应用到的模块给去除掉） 2. 插件和优化 删除了CommonsChunkPlugin插件 它应用内置API optimization.splitChunks和optimization.runtimeChunk，意味着webpack会默认为你生成共享的代码块 其余插件的变动：3. 开箱即用WebAssembly 这会带来运行时性能的大幅度晋升 能够间接对本地的wasm模块进行import或者export操作，也能够通过编写loaders来间接import C++，C或Rust 4. 反对多种模块类型（5种）5. 0CJS 含意是0配置，不再强制应用webpack.config.js作为打包的入口配置文件 它默认的入口为'./src/'和默认进口'./dist'，对小我的项目来说是福音 但它依然有着高度可配置性，能够很好满足你的需要 6. 新的插件零碎 提供了针对插件和钩子的新API 变动如下：注：当应用webpack4时，确保应用Node.js的版本要为8.9.4以上装置webpack
在cmd输出命令：npm install webpack-cli -g （倡议不要全局装置）若想要应用webpack4+版本，你还须要装置webpack-cli：npm install --save-dev webpack-cliwebpack的根本应用
打包命令：webpack --mode development/production 输出文件.js -o 输入文件.jswebpack---入口进口配置文件
配置文件webpack.config.js：const path=require('path');//一个文件打包时的配置module.exports={ entry:'输出文件名字', output:{ path:path.resolve(__dirname,'dist'), //输入文件的目录门路 filename:'输入文件名字' }, mode:'production/development'}//多个文件打包时的配置 module.exports={ entry:{ //多个文件时 xxx:'输出文件1', xxxx:'输出文件2', ... }, output:{ path:path.resolve(__dirname,'dist'), //输入文件的目录门路 filename:'[name].xxx.js' //动静的输入文件名 }, mode:'production/development', //模式 module:{}, //模块：如解析CSS，图片如何转换，压缩 plugins:[], //插件：用于生产模块和各项性能}关上cmd并进入到寄存webpack.config.js的目录下，输出命令 webpack 即可进行打包webpack---加载器url-loader
作用：当某个文件大小小于某个指定size时，会主动转换成DataURL模式（默认为base64）装置：npm install url-loader --save-devwebpack.config.js文件配置：module.exports = { module: { rules: [ { test: /.(png|jpg|gif)$/i, //匹配的图片模式 use: [ { loader: 'url-loader', options: { limit: 8192, //指定size，当小于此size，就会主动转换成DataURL模式（若指定size，可取值false） encoding：指定的编码模式 }, }, ], }, ], },};webpack---加载器babel-loader
作用：把es6，es7...代码转换成能在浏览器运行的es5代码装置：npm install -D babel-loader @babel/core @babel/preset-env webpackwebpack.config.js文件配置：module.exports = { module: { rules: [ { test: /.m?js$/, //匹配的文件扩展名 exclude: /(node_modules|bower_components)/, //排除掉的文件夹 use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], //转换的规定 plugin：[] //配置相干的插件 } } } ] }}webpack---加载器sass-loader
作用：加载 Sass/SCSS 文件并将他们编译为CSS装置：npm install sass-loader sass webpack --save-dev（sass-loader须要事后装置Dart Sass或Node Sass。这能够管制所有依赖的版本， 并自在的抉择应用的 Sass 实现。）webpack.config.js文件配置：module.exports = { module: { rules: [ { test: /.s[ac]ss$/i, //匹配sass/scss文件 use: [ //顺便装置以下用到的模块 "style-loader", // 将JS字符串生成为style节点（用来解决css文件中的url()等，把url挂载到js中） "css-loader", // 将CSS转化成CommonJS模块（将css插入到页面的style标签） "sass-loader", // 将Sass编译成CSS ], }, ], },};webpack---对于插件MiniCssExtractPlugin
作用：将 CSS 提取到独自的文件中，为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件，并且反对 CSS 和 SourceMaps 的按需加载装置：npm install --save-dev mini-css-extract-pluginwebpack.config.js文件配置：const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { plugins: [new MiniCssExtractPlugin({filename:xxx（决定了输入的每个 CSS 文件的名称），chunkFilename:xxx（决定了非入口的 chunk 文件名称），...})], module: { rules: [ { test: /.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ], },};此插件与sass-loader联用时，webpack.config.js文件的配置：const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = { module: { rules: [ { test: /.s[ac]ss$/i, use: [ process.env.NODE_ENV !== "production" ? "style-loader": MiniCssExtractPlugin.loader, "css-loader", "sass-loader", ], }, ], }, plugins: [new MiniCssExtractPlugin({filename: "[name].css", chunkFilename: "[id].css",...})],};webpack---对于插件DefinePlugin
作用：容许在编译时创立配置的全局常量，防止代码的冗余，减少灵活性 这在须要辨别开发模式与生产模式进行不同的操作时，十分有用应用：var webpack=require('webpack');new webpack.DefinePlugin({对应的常量：对应的值});webpack---对于插件HtmlWebpackPlugin
作用：简化了HTML文件的创立，以便为你的webpack包提供服务（HTML文件打包） 这对于那些文件名中蕴含哈希值，并且哈希值会随着每次编译而扭转的 webpack 包特地有用 你能够让该插件为你生成一个HTML文件，应用lodash模板提供模板，或者应用你本人的loader 装置：npm install --save-dev html-webpack-pluginwebpack.config.js文件配置：const HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = { entry: '入口文件名', output: { path: path.resolve(__dirname, './dist'), filename: '进口文件名', }, plugins: [new HtmlWebpackPlugin({ title:'xxxx', // filename:'xxx.html', //生成（输入）的html文件名 template：'xx.html' //输出的html文件（可间接在其文件下编写<% htmlWebpackPlugin.options.title%>来援用到title） })],};这将会把xx.html生成一个蕴含以下内容的 dist/xxx.html 文件：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>xxxx</title> </head> <body> <script src="进口文件名"></script> </body></html>在多个HTML页面打包的状况下：webpack---热替换
须要用到插件：webpack-dev-server作用：会实时更新服务器显示的内容装置：npm install webpack-dev-server -Dwebpack.config.js文件配置：module.exports = { //... devServer: { contentBase: path.join(__dirname, 'dist'), //指标文件所在目录 compress: true, //是否启用 gzip压缩 port: 9000, //指标端口 hot：true //是否热替换（实时更新）（webpack4能够不必阐明此属性配置） },};在package.json文件配置中："scripts":{"start"："webpack-dev-server"}webpack---CSS3前缀
webpack---图片在HTML和CSS中的打包
CSS中图片打包：HTML中图片打包：webpack---革除未应用的CSS
webpack---打包正文
new webpack.BannerPlugin('xxxx（正文）')webpack---入口文件模块化的配置
webpack---开发环境与生产环境
devDependencies（开发环境）寄存测试代码依赖的包或构建工具的包dependencies（生产环境）寄存我的项目或组件代码中依赖到的包装置全副我的项目依赖包：npm install装置生产环境依赖包：npm install --productionwebpack---资源拷贝
对一些开发技术文档可间接进行拷贝