全局简单使用webpack
配置webpack.config.js
关于webpack-dev-server的使用
使用cnpm i html-webpack-plugin -D
webpack-dev-server指令
全局简单使用webpack
1.cmd中下载webpack 使用cnpm i webpack@ -g 全局布置
2.创建项目
3.使用npm init 初始化项目,生成package.json项目文件
4.创建项目基本结构 src源码文件夹,dist发布文件夹
5.在src下创建index.html主文件,main.js项目js入口文件
6.使用webpack .\src\main.js .\dist\bundle.js 将文件打包
配置webpack.config.js
1.在根目录创建一个文件webpack.config.js文件
2.
const path =require('path')
module.exports={
//指定处理文件名字及路径
entry:path.join(__dirname,'./src/main.js'),
output:{
//指定输出路径
path:path.join(__dirname,'./dist'), //指定输出文件
filename:'bundle.js'
}
}
3.这里就可以直接使用webpack直接打包了
关于webpack-dev-server的使用,实现实时自动监听,热加载
1.使用cnpm i webpack-dev-server -D下载
2.这个webpack-dev-server依赖与项目本地中的webpack
3.使用cnpm i webpack -D 项目本地下载webpack
4.packge.json配置文件中scripts添加 “dev”:”webpack-dev-server”
5.使用npm run dev 实现打包
使用cnpm i html-webpack-plugin -D
1.cnpm i html-webpack-plugin下载
+能够在内存找那个生成一个一样的index.html
+能都自动注入bundle.js
2.在webpack.config.js里面配置
const path =require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
//指定处理文件名字及路径
entry:path.join(__dirname,'./src/main.js'),
output:{
//指定输出路径
path:path.join(__dirname,'./dist'), //指定输出文件
filename:'bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
]
}
3.使用npm run dev指令打包
注:这个时候html.index主页面里引用的
script src="…/dist/bundle.js"></script
可以删除了,因为此时打包的bundle.js并没有在这里了,而是可以看作在与src,dist在一层,实际在内存中,不信你也可以试试喔
以上便完成了简单使用webpack指令,自动化打包加载的功能
webpack-dev-server的基本指令
1.opne编译打包后自动打开浏览器
只需要在packge.json配置的scripts中的dev加上open
"dev": "webpack-dev-server --open"
2.如想指定端口,在open后加port端口号
"dev": "webpack-dev-server --open --port 8800"
3.指定ip地址,同理,加上host ip地址
"dev": "webpack-dev-server --open --port 8800 --host 127.1.1.0"
4.只编译更改的代码 --hot
"dev": "webpack-dev-server --open --port 8800 --host 127.1.1.0 --hot"
5.也可以直接在webpack.Config.js的配置包直接加上
devServer:{
open :true,
port:8800,
host:“127.1.1.0”,
hot:true/启用热更新需要插件,过程较为繁琐
}
处理css文件
1.创建css文件,在main.js中引用
import css from './main.css'
2.下载style-loader 和 css-loader
cnpm i style-loader css-loader -D
3.webpack.config.js中配置
module:{
rules:[
{test:/.css$/,use:[‘style-loader’,‘css-loader’]}
]
}
处理样式表中的图片
1.下载url-loader和file-loader(file-loader是url-loader的前置依赖项)
cnpm i url-loader file-loader -D
3.配置webpack.config.js
{test:/\.jpg$/,use:['url-loader']}
注意第一次写博客 不喜勿喷,每一步都是亲手实验得来,如有错误请多指教