配置webpack.config.js
(一)打包bundle.js文件
不想手动指定入口和出口文件,就需要创建一个配置文件,把需要的配置写在配置文件里面。
项目根目录下新建一个webpack.config.js
1.打包bundle.js的配置
const path=require('path');
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
配置完了之后,在终端输入webpack就会执行配置文件里面的代码,重新打包了bundle.js了。
这样刷新网页就可以看到修改js而产生的效果了。
(二)使用webpack-dev-server工具
1.第一种方式
(1)运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖。
(2)安装完毕后,这个工具的用法和webpack命令的用法完全一样。在终端输入webpack-dev-server(由于webpack-dev-server是在项目安装的没有全局安装,所以,直接在终端输入webpack-dev-server报错了,只有那些安装到全局 -g 的工具,才能在终端中正常执行)
解决方法:在package.json文件中,找到scripts的一个配置项,在里面添加:
“dev”:"webpack-dev-server"
执行npm run dev
(遇到包有问题,删除node_modules文件夹,再在终端执行npm i 重新下载包即可)
注意:webpack-dev-server这个工具,如果想要正常运行,要求在本地项目中,必须安装webpack(cnpm i webpack -D),即使全局安装了也不行,本地也必须安装。
配置完成之后,它会实时监控代码,每次改变它都会监测到。
(3)每次打包编译后自动打开浏览器,增加--open
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open"
}
(4)自己选择打开浏览器时使用的端口号(例如选择 3000 的端口号)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000"
}
(5)控制打开浏览器的页面,如:让它打开浏览器之后,首先打开的是首页
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000 --contentBase src"
}
(因为src下面有一个index.html)
(6)样式异步刷新,启用热更新 --hot
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}
2.配置webpack-dev-server的第二种方式
webpack.config.js文件中
const path=require('path');
//启用热更新第二步
const webpack=require("webpack")
//将main.js打包到bundle.js
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
//配置webpack-dev-server的第二种方式
devServer:{
open:true,//自动打开浏览器
port:3000,//指定端口
contentBase:'src',//指定托管目录
hot:true //启用热更新第一步
},
plugins:[//配置插件的节点
//new 一个热更新的模块对象,这是启用热更新的第三步
new webpack.HotModuleReplacementPlugin()
]
}
(三)使用html-webpack-plugin 插件
(1)本地项目安装html-webpack-plugin插件
npm i html-webpack-plugin -D
(2)在webpack.config.js中导入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
(3)在插件配置中创建插件对象(所有的插件都在plugins里面配置)
plugins:[//启用热更新第三步 new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件 template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来会根据指定的页面路径,去生成内存中的页面 filename:'index.html' }) ]
这个插件的两个作用:
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去
(四)配置处理css样式表的第三方loader
webpack 默认只能打包处理 JS 类型的文件,无法处理其他的非 JS 类型的文件
如果需要处理非 JS 类型的文件,需要安装合适的第三方 loader 加载器
1.如果想要打包处理css文件,需要安装
npm i style-loader css-loader -D
2.在webpack.config.js这个配置文件里面新增一个配置节点,叫做module,它是一个对象,在这个module对象身上,有个rules属性,这个rules属性是个数组,这个数组中,存放了所有第三方文件的匹配和处理规则。
module:{//这个节点用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则 ] }
3.配置处理less文件的loader
(1).安装less
npm i less -D
(2).安装less-loader
npm i less-loader -D
(3).配置规则
module:{//这个节点用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则 {test:/\.less/,use:['style-loader','css-loader','less-loader']} ] }
4.配置处理scss文件的loader
(1). cnpm i node-sass -D(这里用cnpm,因为用npm会安装失败)
(2). npm i sass-loader -D
(3).配置规则
module:{//这个节点用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则 {test:/\.less/,use:['style-loader','css-loader','less-loader']}, {test:/\.scss/,use:['style-loader','css-loader','sass-loader']} ]