感谢入门 Webpack，看这篇就够了，按照教程走下来一步一步基本都ok，对webpack有了一个基本的认识。是很好的教程
Why Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
How to use
先在全局安装webpack
//全局安装npm install -g webpack
新建一个文件夹，这里命名为WebpackSample，然后在该路径中打开git bash，在项目中下载webpack
//安装到你的项目目录npm install --save-dev webpack
webpack的核心文件package.json可以自己在路径中创建，也可以用npm来创建，这里我们使用npm初始化的方式创建。创建过程中会进行基本信息的交互，包括name,version等，因为这里我们是简单的举例，所以我们可以全部回车掉进行默认处理
npm init //创建package.json文件
创建两个文件夹，三个文件。创建app和public文件夹，app文件夹用来放置原始数据和我们将写的javascript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件：index.html——放在public文件夹中；Greeter.js——放在app文件夹中；main.js——放在app文件夹中。
index.html的代码：它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js）
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'> </div>
<script src="bundle.js"></script>
</body>
</html>
Greeter.js代码：
我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet; };
main.js代码：把greeter.js返回的节点插入页面
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
OK，这个时候我们可以开始运行webpack了
因为我们这里采用的是全局安装，所以可以直接在命令行中使用webpack指令
注意，2019年5月下载的webapck版本命令和旧版本有所区别
webpack app/main.js public/bundle.jswebpack app/main.js -o publick/bundle.js
OK了之后是这样的
在webstorm里面打开一下index.html就可以看到啦。
这是最基本的webapck使用方法，我们现在较常用的是使用webpack.config.js文件来配置
在webpack.config.js中定义entry和output即可。
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
在这之后在命令行中 直接webpack就好了。
另外还有一种使用npm来代替webpack的方式，我们在github上面也常看到
在package.json里面添加"scripts"字段（若scripts不存在），然后key="start",value="webpack"，意思是运行npm start的时候相当于运行webpack。start是特殊的，如果是其他的scripts名，就要使用npm run script_value或者npm run build。
这个时候npm start和之前使用webpack命令是一样的效果啦。
网友评论