其实前面的都不足以展示出webpack在众打包工具中的优势
webpack的优势在于 可以打包大规模项目文件 以及静态资源文件
这才是webpack独有的优势
首先我们来创建一个webpack项目
找一个文件夹 在终端中输入
npm init
根据提示操作 就会生成一个package.json
将webpack引入进来
npm install webpack webpack-cli --save-dev
然后在终端输入
npm install html-webpack-plugin --save
再在终端输入
npm install webpack-dev-server --save
打开package.json 给 scripts 添加上
“build”: “webpack-dev-server”,
“webpack”: “webpack”
两个配置
在根目录建立src文件夹
在src下创建一个assets文件夹
里面放一个css文件和一个图片
和我同名就可以直接复制代码了 之后可以看明白在改名
carnival.png
index.css
* {
color: red;
}
在src下创建index.html
index.html参考代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "text"></div>
</body>
</html>
在src下创建output.js
output.js参考代码如下
import carnival from "./assets/carnival.png"
import indexcss from "./assets/index.css"
const output = () => {
console.log("资源加载");
let cssin = document.createElement("link");
cssin.setAttribute("href",indexcss);
cssin.setAttribute("rel","stylesheet");
document.querySelector("head").appendChild(cssin);
document.getElementById("text").innerHTML = `引入成功<img style = "width: 10em;height: 10em;" src = ${carnival}/>`;
}
export default output
在src下创建index.js
index.js参考代码如下
import output from "./output"
window.onload = function() {
output();
}
在项目根目录创建webpack.config.js
webpack.config.js参考代码如下
//通过node获取到当前文件的位置
const path = require('path')
//导入刚引入的第三方插件html-webpack-plugin
const HtmlWebpackPplugin = require('html-webpack-plugin')
module.exports = {
//设置当前入口文件
entry: './src/index.js',
//出口配置
output: {
//打包的文件名
filename: 'bundle.js',
//生成的文件位置
path: path.resolve(__dirname, './distribution')
//设置自动清理掉原本的打包文件
//clean: true
},
mode: 'none',
//webpack插件配置
plugins: [
//实例化html-webpack-plugin插件功能
new HtmlWebpackPplugin({
//html-webpack-plugin参数配置
//指定打包HTML文件参照的模板HTML
template: './src/index.html',
//生成的html文件名称
filename: 'app.html',
//定义打包的js文件引入在新html的哪个标签里
inject: 'head'
})
],
//设置webpack-dev-server监听属性
devServer: {
//设置webpack-dev-server监听路径
static: './distribution'
},
//设置文件格式处理
module: {
rules: [
{
//转换文件格式
test: /\.png$/,
//文件打包方式
type: 'asset',
//文件打包代理路径和名称 这里我们采用随机
generator: {
filename: `./assets/[contenthash][ext]`
}
},
{
//转换文件格式
test: /\.css$/,
//文件打包方式
type: 'asset',
//文件打包代理路径和名称 这里我们采用随机
generator: {
filename: `./assets/[contenthash][ext]`
}
}
]
}
}
然后我们在终端执行
npm run webpack
重新打包
然后执行
npm run build
启动项目
用终端路径访问浏览器
点击app.html
可以看到 css 样式 和 图片都加载出来了