webpack4系列教材-入门
起步
使用yarn init 初始化一个基本项目
安装依赖
进入终端输入
yarn add webpack
yarn add webpack-cli
由于webpack4官网要求需要多一个webpack-cli依赖
开始
在根目录新建一个index.html，main.js
如图所示
-w189
index.html内容如下，假定打包文件叫bundle.js
<html>
<meta charset="utf-8">
<title>这是一个webpack示例项目</title>
<body>
<script src="bundle.js"></script>
</body>
</html>
main.js内容如下
document.write('hello webpack')
webpack开始
在项目根目录创建一个webpage.config.js
内容
module.exports = {
mode:'production', //当前模式为生产模式
entry: "./main.js", //入口文件
output: {
filename:'bundle.js', //输出文件名
path:__dirname //node.js中全局变量,为当前根目录
}
}
启动
方法一：在package.json加入以下内容
"scripts": {
"start": "webpack --config webpack.config.js"
}
然后在终端执行 yarn run start 即可
方法二：直接在终端执行
npx webpack --config webpack.config.js
看到下列输出，就大功告成了！！
-w435
打包完成！！，webpage帮我们生成了一个bundle.js
-w195
来我们看成果
直接到浏览器打开根目录index.html，看到输出hello webpack!! 非常完美！
-w615
网友评论