前端开发打包工具—

什么是webpack？

webpack 是一个打包模块化 javascript 的工具，在webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构建模块化项目； webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

我对打包工具的理解就是

把不同模块的代码代码转译成一样的，把es6的转译成es5的或者更老的
把不兼容的变成兼容的
把近些年牛X的TS写的变成JS写的
把格式分明的，本来人能看懂的变成一坨人看不懂的
把本来臃肿的，可能存在，哦不，肯定存在的一堆垃圾代码删除，比如用不到的，或者多余的空格，或者复杂的变量变成简洁的（就相当于加密了，防止别人剽窃）

https://zhuanlan.zhihu.com/p/455365896https://zhuanlan.zhihu.com/p/455365896

webpack官网：

webpack

webpack环境安装

小黑窗输入：

npm install webpack webpack-cli -g

npm install webpack webpack-cli -g//不指定版本,默认下载最新版本,全局安装以后直接使用
mkdir webpack-demo  //创建项目文件夹,随意名字同js变量名规则
cd webpack-demo  //进入项目文件夹
npm init -y  //生成项目配置文件创建一个webpack.config.js的打包配置文件
代码:
module.exports={     项目入口配置,项目出口配置,加载器配置,插件配置,开发模式配置,其他
}

项目结构

+alipay|+app|-test.js|-test2.js|-test3.js|-test4.js|-test5.js|-webpack.config.js|-package.json

入口entry

测试文件

test1.js

console.log(777)

test2.js

var obj={username:"jack",age:14}
export default obj

test3.js

console.log(6666)
import obj from './test2'
console.log(obj)

webpack.config.js

const path = require("path")
module.exports = {// 1.直接配置入口文件entry:path.join(__dirname,"./src/test3.js")// 2.配置基础目录,然后配置入口文件context:path.join(__dirname,"./src"),entry:"./test3.js"// 3.多入口多出口，属性名是相应的js文件导出时的文件名context:path.join(__dirname,"./src"),entry:{a:'./test3.js',b:'./test1.js'}// 4.多入口，导出为一个文件，文件名默认为maincontext: path.join(__dirname, "./src"),entry: ['./test3.js','./test1.js']// 5.入口配置context: path.join(__dirname,"./src"),entry: {a:{import: './test3.js',filename:'pages/[name][hash:6].js'},b:{import:'./test1.js',filename:'pages/[name][hash]666.js'}}

module，chunk，bundle分别是什么？

1、module：开发中的每个文件都可以看作是 module，模块不局限于js，也包含css，图片等

2、chunk：表示代码块，一个 chunk 可以由多个模块组成

3、bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle就是对 chunk 进行编译压缩打包等处理后的产出

出口output

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」

mode: "none",context: __dirname + '/src',// entry:'./test.js',entry: {a: {import:'./test3.js',filename:'pages/[name][hash:6]999.js'}//这里设置的filename会覆盖output设置的filename},output: {asyncChunks: true, //创建按需加载的异步 chunk。path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist// filename: 'bundle.js', //输出的文件名filename: '[name]-666-[id]bundle[hash:5]666.js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的// library: 'hqyj',//库名library: {name: 'MyLibrary', //库名type: 'var', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')},// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理，因为我们可能在未来放弃对 output.libraryTarget 的支持。]auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)   //各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)// auxiliaryComment: {//    root: 'Root Comment',//   commonjs: 'CommonJS Comment',//   commonjs2: 'CommonJS2 Comment',//     amd: 'AMD Comment',// },  clean: true, // 在生成文件之前清空 output 目录// clean: {//       dry: true, // 小黑窗打印而不是删除应该移除的静态资源//     },// clean: {//  keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删//    // keep(asset) {//  //  return asset.includes('ignored/dir');//同上//   // },// },      }