webpack
新建项目
webpack-study
cd到项目目录
npm init (-f)
全局安装webpack
npm install webpack -g
在项目本地安装webpack
npm install webpack -D
打包
webpack 要打包的文件 打包的输出文件
在项目的根目录下创建webpack.config.js
// 这个配置文件 其实就是一个js文件 通过node中的 模块 向外暴露一个配置对象
const path = require('path'),
module.exports = {
// 需要指定入口 和 出口
entry: path.join(__dirname, './src/main.js') // 入口 表示要打包哪个文件
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js' // 指定输出的名称
}
}
- 运行webpack 发现没入口出口
- webpack会去项目根目录找webpack.config.js
- 解析webpack.config.js 获得配置对象
- 拿到配置对象的入口出口 并打包
使用webpack-dev-server来实现自动打包编译功能
- 把工具安装到项目的本地开发依赖
$ npm install webpack-dev-server -D
- 安装完毕后 这个工具的用法和webpack用法一样
- 由于,我们是在项目中,本地安装的webpack-dev-server, 所以无法把他当做脚本命令在powershell终端中执行;
(只有那些 安装到全局 -g的工具, 才能在终端中正常执行) - webpack-dev-server 如果想要正常运行, 要求在本地项目中 必须安装webpack(哪怕全局安装了也是,必须本地安装一次)
- webpack-dev-server 帮我们打包生成的 bundle.js文件, 并没有存放到实际的物理磁盘上, 而是直接托管到了电脑的内存中, 所以在项目根目录中找不到这个打包好的bundle.js
- 我们可以认为 webpack-dev-server 把打包好的文件, 以一种虚拟的形式, 托管到了项目的根目录中, 虽然看不到它, 但是可以认为 dist src modemodules 平级 有一个看不见的文件叫做bundle.js
package.json
"scripts": {
"test": "echo \"Error : no test specified \" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" // 代表自动打开浏览器 端口3000 以src里的index.html为首页 打开 --hot 增量以补丁形式打包进来 并且浏览器无刷新重载
}
- 写好之后 npm run dev
把html页面也保存到内存中
- 安装
npm install html-webpack-plugin -D
- 在webpack.config.js中引入html-webpack-plugin
// 只要是插件 都一定要放到plugins节点中去
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
- webpack.config.js中的配置插件的节点中 创建一个插件
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板页面, 将来会根据指定的页面路径,去生成内存中的页面
filename: 'index.html' // 设置生存的内存页面的名称
})
]
- 当使用html-webpack-plugin之后, 我们不在需要手动处理bundle.js的引用路径了,因为这个插件已经帮我们自动创建了一个合适的script,并且引用了正确的路径
- webpack默认只能打包处理js类型的文件, 无法处理其他非JS类型的文件,如果非要处理如CSS的文件,我们需要手动安装一些合适的第三方loader加载器
// 1. 如果想要打包处理css文件, 需要安装
npm install style-loader css-loader -D
// 打开webpack.config.js文件 在里边新增一配置节点module, 它是一个对象, 在这个module对象身上有一个rules属性, 这个rules属性是个数组 这个数组中存放了所有第三方文件的匹配和处理规则.
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css文件的第三方loader规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置处理 .less文件的第三方loader规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=8192' }, // 配置处理 .jpg .png等图片 因为只有一个loader 不用数组
// limit给定的值是图片的大小, 单位是byte字节, 如果图片小于limit 则会转为base64, 如果大于等于limit就不会转为base64字符串
]
}
webpack处理第三方文件类型的过程
- 发现这个要处理的文件不是JS文件, 然后就去配置文件中查找有没有对应的第三方loader规则.
- 如果能找到对应规则, 就会调用对应的loader处理这种文件类型
- 在调用loader的时候 从后往前调用
- 当最后的一个loader调用完毕, 会把处理的结果, 直接交给webpack 进行打包合并, 最终输出到bundle.js中去
最后项目的目录应该是这样的
Screen Shot 2018-12-21 at 9.43.18 PM.png
