这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
什么是webpack
什么是webpack
webpack可以看做一个模块打包机，它做的事情是，分析你的项目架构，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言(scss、typeScript等)，并将其打包为合适的格式以供浏览器使用。
可以做的事情
代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
需要提前掌握的内容
- 需要node基础、以及npm的使用
- 掌握es6语法
为什么需要构建工具
转换es6语法
转换jsx
css前缀补全/预处理器
压缩混淆
图片压缩
前端构建的演变之路
ant + YUI Tool -> grunt -> fis3/glup -> rollup/webapck/parcel
webpack安装
安装本地的webpack
webpack webpack-cli -D
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --D
mkdir src
实践后发现首次打包必须新建src目录
查看webpack 版本
./node_modules/.bin/webpack -V
webpack可以进行0配置
1 打包工具-> 输出后的结果(js模块)
这时候的目录结构是这样的
webpack-demo
|- package.json
+ |- /src
+ |- index.js
这时候我们在index.js中写一个
console.log("打印日志")
输入指令
npx webpack
npx的作用如下：
1.默认情况下，首先检查路径中是否存在要执行的包（即在项目中）
2.如果存在，它将执行；
3.若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；
目录发生了变化
webpack-demo
|- package.json
+ |- /dist
+ |- main.js
|- /src
|- index.js
我们就可以打包后的文件出现在了dist目录下
打包(支持我们的js的模块化)
为了方便工程化的js
使用module.exposts抛出
module.exports = {
a: 1
}
使用require的方式接受参数
let str = require('./a.js')
手工配置webpack
默认配置文件名字 webpack.config.js
初始webpack 配置文件名称
webpack配置文件 webpack.config.js
可以通过webpack --config 指定配置文件
新建一个webpack.config.js
// webpack 是node写出来的 node的写法来运行
let path = require('path');
module.exports={
mode: 'development', // 模式(环境) 默认两种 production development
entry:'./src/index.js', // 入口 指定默认的entry为 './src/index.js'
output:{
filename:'bundle.js', // 打包后的文件名
path: path.resolve(_dirname,'dist'), //路径必须是一个绝对路径
}, // 导出默认 './dist/main.js'
modlue:{
rules:[ // loader配置
{text:/.txt$/,use:'raw-loader'}
],
plugins:[ // 插件配置
new HtmlwebpackPlugin({
template:'./src/index.html'
})
]
}
}
那么这样你就可以打包到dist下叫做budle的名称了
npx webpack
./node_modules/.bin/webpack
都可以打包出webpack
如果在packjson 中加入build，也可以进行打包
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
