npm install webpack-cli -g 安装webpack
使用webpack-dev-server实现自动打包编译的功能
1.cnpm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2.安装完毕后这个工具的用法个webpack的一样
3.如果是本地安装的 webpack-dev-server 所以无法把他当做脚本命令在命令行直接运行(只有那些安装到全局 -g的工具 才能在终端中正常执行)
4.注意 webpack-dev-server这个工具如果想要正常运行,要求:在本地项目中,必须安装webpack
5.打开 npm run dev 前提是要在package.json里面写上dev
意思就是用dev来代替dev里面的内容
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"lodash": "^4.17.15"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
}
}
webpack-dev-server 帮我们打包生成的bundle.js文件并没有存放到实际的物理磁盘上,而是直接托管到了 电脑内存中,所以我们在项目根目录中 根本找不到这个打包好的bundle.js;
我们认为 webpack-dev-server把打包好的文件以一种虚拟的形式,托管到了咱们项目的根目录中,虽然我们看不到它,但是可以认为 和dist src node_model 平级 有一个看不见的文件 叫做bundle.js
"dev":"webpack-dev-server --port 3000"
说明端口是3000
// webpack 默认只能打包js文件 无法处理其他非js文件
// 如果要处理 得手动安装第三方loader加载器
//依赖css文req
require(’./css/normal.css’);//这个只需要引就行了 不需要保存为一个变量 这个在main.js里面
再添加一个loader
*
添加loader怎么加呢?
loader
先进入webpack的官网
然后按照文档上的步骤走就是了
// 1. 如果想要打包处理 css文件 需要安装cnpm i style-loader css-loader -D
/ 2.打开webpack.config.js这个配置文件 在里面新增一个配置节点,叫做module 他是一个对象,在这个model对象身上有个rules属性,这个rules属性是一个数组,在这个数组中,存放了所有第三方文件的匹配和处理规则
module:{
// 这个节点用于配置所有第三方模块加载器
rules:[ //所有第三方模块的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']},//配置处理 .css文件的第三方loader规则
//当然要style-loader的话得安装style-loader 这个也在loader文档中有讲解到
]
}
//使用多个loader的时候是从右向左的
webpack4.0+的打包方式和3.0+的区别就是要在两个路径之间加一个 -o
eg:
3.0+: webpack ./src/main.js ./public/bundle.js
4.0+ webpack ./src/main.js -o ./public/bundle.js
加载图片
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
//如果图片小于这个值的话 会将图片编译成base64字符串形式的
//如果大于这个值 的话就要下载安装一个专门的loader
//npm install file-loader --save-dev
limit: 8192
}
}
]
}
安装loader肯定是必要的
安装之后
还要设置大于limit的文件去安装另一个loader
/npm install file-loader --save-dev
之后 图片会被打包到发布的文件夹下 所以直接访问肯定是访问不到的,所以要配置一个自动跳转路径的东西
这个东西也是在config里面配置
在output里面加上这一行,