之前我说了一个入门的webpack4 现在我尝试着搭建一个稍微完整点webpack项目
开始之前还是显示环境的搭建 想让项目支持热更新(本地修改代码浏览器上会实时更新)
1.建立一个空的文件夹
2.先初始化项目 npm init 一路回车到底 0.0
3.安装相关的依赖
npm i -D
webpack //webpack的核心功能包
webpack-cli // webpack 的一些命令行 可以在 package.json中配置启动项
webpack-dev-server // 热更新需要 同时也依赖 webpack-cli
style-loader //将css-loader 解析后的结果 渲染在浏览器上
css-loader // 提取css文件
url-loader //提取其他的文件 如:图片,字体等等
file-loader // 功能和上面的一样 配合使用
babel-loader // 兼容js代码 将es6=>es5 等等 在低版本 ie浏览器上兼容设置
4.新建相关的文件
4.1 index.html
4.2 新建一个src文件夹
main.js
main.css
img 文件夹 =>存放图片 我放了一个 bg.jpg的图片文件
4.3 新建立一个 config的文件夹 下面有俩个文件
webpack.production.js // 用于生产环境的 webpack配置
webpack.development.js //用于开发环境下的webpack配置
4.4 最主要的还有
webpack.config.js 核心配置文件
5.代码书写
5.1 package,json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --env.development", // --open 支持运行 就会启动浏览器 不用手动 在地址栏输入地址 --env.development 会给webpack.config.js传递一个参数 告诉是 启动 开发环境下的webpack配置
"build": "webpack --env.production"
}
5.2 webpack.config.js中的代码
我是用一个导出一个函数 里面根据 env的设置 动态选择行 加载那个webpack配置
module.exports=function(env,argv){
// env是环境配置
env=env||{development:true}
return {
entry:"./src/main.js",
module:{
rules:[
{
test:/\.css$/i,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif)/i,
use:{
loader:'url-loader',
options:{
outputPath:'imgs/',
// publicPath:'dest/imgs', //在 dev-server中图片路径 不需要对外路径 因为这个时候图片存储在内存中
// 静态加载需要 动态加载就不需要了 这句话可以去掉
limit:4*1024
}
}
}
]
},
...env.production?require('./config/webpack.production.js'):require('./config/webpack.development.js') //核心代码 动态性加载 env.production 的值 为true和false 动态加载哪一个环境下的配置
}
}
5.3 src /main.js
import "./main.css" //引入了一个 css文件
alert('hello webpack!'); //弹出一句话
5.4 src/main.css
body{
background: url(img/bg.jpg); // 加载了一个背景图片
}
5.5 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Webpack</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
5.6 config 文件夹
5.6.1 webpack.production.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); // 安装生成html文件的插件
module.exports={
mode:"production",
output:{
filename:"bundle.min.js", // 生成生产环境下的 js文件
path:path.resolve(__dirname,'../dest/')
},
// html-webpack-plugin 帮你生成一个html文件的插件
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../index.html') // 选择模板文件 就是你创建的index.html文件 自动帮你引入生成的 bundle.js文件 不用手动引入
})
]
}
5.6.2 webpack.development.js
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path=require('path');
module.exports={
mode:"development",
output:{
filename:"bundle.js", //生成开发环境下的js
},
// html-webpack-plugin 帮你生成一个html文件的插件
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../index.html')
})
]
}
6.最后就是测试了
我们在命令行 运行 npm run start 他就会执行 开发环境下的webpack配置 同时也支持热更新
npm run build 就会执行开发环境下的 webpack 会在当前目录生成一个 dest文件夹
下面 包括 一个 bundle.min.js 一个 imgs文件夹 里面有一个图片文件 一个index.html文件
在实际的生产环境 我们可以直接把这个dest文件拿过来 放到我们的服务器上就可以
为了 我特意 放到了 我的 php的apache服务器上测试 是可以的
7.总结
我在配置的时候碰见写个文件就是文件路径的问题 能用绝对路径还是绝对路径
使用path模块 resolve方法 因为配置里面的文件路径可能需要变来变去 我们使用相对路径的时候 还是算来算去的
最后 祝愿大家都能配置成功
武汉 加油 中国加油 希望这次疫情早点过去 生病的人早点康复 武汉也早点好起来
