从这篇开始，会不定期更新webpack教程。希望能帮到在路上的小伙伴
webpack文档.
准备：1.安装node.js环境并配置好
安装webpack
tip: 安装之前一定要先安装node node官网.
1. 新建文件夹并进入
打开命令框工具，输入
npm init
现在文件夹下会生成一个package.json文件，这个文件包含项目基本信息：
// <!-- package.json -->
{
"name": "webpackdemo", // 项目名称
"version": "1.0.0", // 项目版本
"description": "", // 描述
"main": "index.js", // 执行的入口文件
"scripts": { // 配置项目命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], // 关键字
"author": "", // 作者(这里指开发者)
"license": "ISC", // 标准(这个默认就ok)
"dependencies": { // 生产环境需要的依赖包
},
"devDependencies": { // 本地开发需要的依赖
"webpack": "^4.32.2", // 安装包
"webpack-cli": "^3.3.2"
}
}
接下来安装webpack,2种方法，一种是全局安装(通常我们不建议全局安装，因为每个项目需要的webpack版本可能会有不同，这里我们只说项目内安装)，
一种是项目内安装。
项目内安装
npm install webpack webpack-cli --save-dev 等同于
npm install webpack webpack-cli -D
npm install webpack webpack-cli --save-dev
安装完成后，输入 npx webpack -v 出现版本号说明安装成功
npx webpack -v
现在新建文件，来体验下文件打包是什么样的
在文件夹的根目录下新建 index.html 文件，以及src文件夹。在src文件夹下面新建 index.js文件，并将下面相应的代码复制
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="root">欢迎来到蔓羊博客</div>
<!-- 这里的dist 以及main.js 会在后面操作打包生成 -->
<script src="./dist/main.js"></script>
</body>
</html>
index.js
window.onload = function(){
var dom = document.createElement('div');
var root = document.getElementById('root');
dom.innerHTML = '这是我的测试博客';
root.appendChild(dom);
}
现在项目目录应该是这样：
webpackdemo
|- node-modules
|- src
|- index.html
|- index.js
|- package.json
|- package-lock.json
建好了之后，打开git命令行工具，输入下面的命令。这个时候根目录下面会生成一个dist文件夹(ps:也就是通常所说的打包之后的文件)
这个时候可以在浏览器打开index.html,显示正常，说明打包成功
npx webpack index.js
npx：是webpack内置的打包命令。打包配置文件也是webpack默认的打包配置
以上就是webpack入门，想了解更多，请移步下篇文章 ?
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
