三种Webpack打包方式(小结)
更新时间：2018年09月19日 09:35:57 作者：高手坟墓丶
这篇文章主要介绍了三种Webpack打包方式(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
准备工作
mkdir webpack_demo && cd webpack_demo #新建文件夹 npm init #创建package.json文件 npm install --save-dev webpack #安装依赖（非全局安装） mkdir app && mkdir public #新建app和public文件夹 cd app && cd.>Greeter.js && cd.>main.js #app文件夹中创建Greeter.js和main.js cd .. && cd public && cd.>index.html #public文件夹中创建index.html
index.html写入如下内容：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Demo</title>
</head>
<body>
<div id='root'> </div>
<script src="bundle.js"></script>
</body>
</html>
Greeter.js写入如下内容：
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hello webpack!";
return greet;
};
main.js写入如下内容：
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
正式使用Webpack
1. 通过node_modules/.bin/webpack app/main.js public/bundle.js命令
结果：
此时，public文件夹里面多出了一个bundle.js文件，打开index.html出现Hello webpack！
2. 通过配置文件
在项目根目录下（和package.json同级）新建webpack.config.js，填入如下内容：
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
然后在终端运行
node_modules\.bin\webpack
该命令会自动调用webpack.config.js文件中的配置。
3. 更快的方式
第二种其实输入的命令也比较麻烦，我们可以在添加了webpack.config.js后，再在package.json中对scripts进行配置。
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
在scripts中修改成键值对：”test”:”webpack”,在终端直接输入命令：
npm test
注意：
如果将test改成test1则会报错：
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test1": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
输入
npm test1
提示信息如下：
就是命令的名字需要是列举的那一堆里面的，例如start，然后npm start。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在JS中，window.opener只是对弹出窗口的母窗口的一个引用。本篇文章主要是对js中opener的使用进行了详细介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
本人闲暇时自写的无缝滚动js，代码简单实用，通俗易懂，晒出来与大家共享，感兴趣的朋友可以参考下哈2013-06-06
最近有美工朋友找我们要兼容性比较好的对联广告代码，我们给他一个他竟然不能运行，经过排查，这是因为现在的广告也用了一样代码，函数命名重复。2011-07-07
这篇文章主要介绍了js实现文本框选中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以参考下2015-05-05
在开发中，变量名，函数名一般要做到清晰明了，尽量做到看名字就能让人知道你的意图，所以变量和函数命名是挺重要，今天来看看如果较优雅的方式给变量和函数命名。2021-05-05
window.open被浏览器拦截导致页面无法弹出，a标签的弹出就不会被浏览器拦截，下面有个不错的示例，大家可以学习下2014-04-04
本文主要介绍了JavaScript原生节点操作的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
javascript完整操作Table的增加行，删除行的列子大全
非常漂亮的js操作table行代码函数。比较方便2008-10-10
这篇文章主要介绍了js实现鼠标点击文本框自动选中内容的方法,涉及javascript鼠标点击事件onClick及选择事件select的使用技巧,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript如何操作css，帮助大家更好的进行前端开发，优化网页，感兴趣的朋友可以了解下2020-10-10
最新评论