前端开发打包工具——webpack(1)

什么是webpack?

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

我对打包工具的理解就是

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

https://zhuanlan.zhihu.com/p/455365896icon-default.png?t=M7J4https://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');//同上
            // 	// },
            // },		
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值