什么是webpack?
webpack 是一个打包模块化 javascript 的工具,在webpack 里一切文件皆模块,通过 loader 转换文件,通过 plugin 注入钩子,最后输出由多个模块组合成的文件,webpack 专注构建模块化项目; webpack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
我对打包工具的理解就是
- 把不同模块的代码代码转译成一样的,把es6的转译成es5的或者更老的
- 把不兼容的变成兼容的
- 把近些年牛X的TS写的变成JS写的
- 把格式分明的,本来人能看懂的变成一坨人看不懂的
- 把本来臃肿的,可能存在,哦不,肯定存在的一堆垃圾代码删除,比如用不到的,或者多余的空格,或者复杂的变量变成简洁的(
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');//同上
// // },
// },
}