前端开发打包工具——webpack（1）

什么是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.多入口，导出为一个文件，文件名默认为main
     context: 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');//同上
            // 	// },
            // },		
        }