webpack 就是静态模块打包器，将应用程序所需的一个多个模块打包成一个或多个bundle。
webpack 的四个核心部分：入口(entry)、输出(output)、loader、插件(plugins)。另外还有 mode 模式： 表示打包的是dev环境还是production生产环境。
安装：cnpm i webpack webpack-cli -D; 使用淘宝镜像安装在开发环境中， 安装webpack 及 webpack-cli； webpack 运行依赖webpack-cli
webpack 所有工具都是基于nodeJs平台的，遵循commonJS规则
// 实践过程
创建初始化项目，npm init -y；
新建 webpack.config.js 或 webpackfile.js 文件； 运行时 webpack-cli 会自动寻找运行这个两个默认文件；
1 // webpack 是用node写出来的，遵循的是commonJS 2 const path = require('path') // node 自动路径模块 3 module.exports = { 4 mode:'development', // 模式 development； 5 entry:'./src/index.js', // 入口文件 6 output:{ // 出口文件 7 path:path.resolve(__dirname,'dist'), // 打包生成路径 8 filename:'bundle.js', // 生产的文件名 9 } 10 }
在终端使用 npx webpack 即可运行项目； 或者在package.json 中配置scripts脚本；
"scripts": { "dev": "webpack" }, // 使用 npm run dev 即可运行 // 如果需要配置则加 --config 文件名 "scripts": { "dev": "webpack --config webpack.config.mine.js" },
webpack-dev-server // 静态的本地服务； 能够实时的重载
1 devServer: { 2 port: "8000", // 端口号 3 contentBase: "./dist", // 告诉服务器 文件的根目录 4 // historyApiFallback: true, // 当返回 404 是否跳转到设置的页面 true时不跳转 5 // historyApiFallback: { 6 // rewrites: [{ from: /./, to: "/404.html" }], 7 // }, 8 // host: '', 设置服务器的主机号 默认 localhost 9 // hot:true, // 模块热替换 10 // inline: true,//实时刷新 11 // compress: true, // 当设置为true时，对所有服务器资源进行gzip压缩 12 // overlay: true, // 浏览器编译输出错误 13 // progress: true, 14 // stats: "errors-only", // 用来控制编译的时候shell上的输出内容, (只是输出错误) 15 open: true, // 当为true时，devserver将直接打开浏览器 16 // proxy:{ // 重定向，一般解决跨域问题 17 // "api": { // 一个 “/api/users”地址的请求将被重定向到”http://localhost:3000/api/users“,如果不希望”api”在传递中被传递过去，可以使用rewrite的方式实现： 18 // target:'http://localhost:3000', 19 // pathRewrite:{'^/api':''} 20 // } 21 // }, 22 // publicPath:'/home/', // 设置编译后文件的路径 默认是 / 设置后 http://localhost:3000/home/bundle.js 23 },
html-webpack-plugin
1 new htmlWebpackPlugin({ 2 // html 插件 配置 https://github.com/jantimon/html-webpack-plugin#configuration 3 title: "demo", // 页面标题 4 filename: "index.html", // 输出文件名 默认 index.html 5 // template: '', // 模板的路径 6 hash: true, 7 inject: true, // true false 表示html是否插入js文件 body head 表示插入在body底部或head标签内 8 // scriptLoading: 'blocking', // 'defer' 同script标记的 defer属性 9 // favicon: '', // 网站图标的路径 10 // meta: {}, // Allows to inject meta-tags. E.g. meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'} 11 minify: { 12 // 压缩 13 //是否对大小写敏感，默认false 14 caseSensitive: true, 15 //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled 默认false 16 collapseBooleanAttributes: true, 17 //是否去除空格，默认false 18 collapseWhitespace: true, 19 //是否压缩html里的css（使用clean-css进行的压缩） 默认值false； 20 minifyCSS: true, 21 //是否压缩html里的js（使用uglify-js进行的压缩） 22 minifyJS: true, 23 //Prevents the escaping of the values of attributes 24 preventAttributesEscaping: true, 25 //是否移除属性的引号 默认false 26 removeAttributeQuotes: true, 27 //是否移除注释 默认false 28 removeComments: true, 29 //从脚本和样式删除的注释 默认false 30 removeCommentsFromCDATA: true, 31 //是否删除空属性，默认false 32 removeEmptyAttributes: true, 33 // 若开启此项，生成的html中没有 body 和 head，html也未闭合 34 removeOptionalTags: false, 35 //删除多余的属性 36 removeRedundantAttributes: true, 37 //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false 38 removeScriptTypeAttributes: true, 39 //删除style的类型属性， type="text/css" 同上 40 removeStyleLinkTypeAttributes: true, 41 //使用短的文档类型，默认false 42 useShortDoctype: true, 43 }, 44 // cache: true, // 当内容改变时，就会生成一个文件 45 // showErrors: true, // 当webpack编译时出现错误就会显示出错误便于定位 46 // chunks: [], // chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件 47 // excludeChunks: [], // 排除掉一些js 48 }),