Webpack是为浏览器构建JavaScript模块脚本的前端工具。
官网： https://webpack.github.io/docs/cli.html
运作步骤：
1.npm init
2.安装
3.添加文件
4.改文件
5.安装插件
6.打包
7.浏览器预览
1.安装
终端命令
1.--$ npm init 命令可以自动创建这个package.json文件,这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。
2.--$ npm config set loglevel http，让你知道 npm 发的每一个请求
3.--安装速度变快，运行
$ npm config set registry https://registry.npm.taobao.org/
-
2种选其中一个
//全局安装
--$ npm install -g webpack
//本地安装，到你的项目目录,前提git init一下。
--$ npm install --save-dev webpack
图片.png
3.验证安装成功
--$ webpack --help 如果看到类似下面的信息，就说明安装成功
图片.png
ps:如果出现
图片.png
--方法.直接安装指定版本就行了，如安装 xx 版：
npm install --save-dev webpack@3.10.0
图片.png
安装成功后的文件
image.png
2.使用
文件结构：
image.png
2.--安装插件
$ npm install --save lodash
$ npm i babel-loader babel-core babel-preset-es2015 babel-preset-react
index.js 中打包 lodash 依赖，我们需要在本地安装 library
也可以安装其他包，jQuery......
dist/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
4.把本地 src/index.js 打包成 dist/bundle.js
本地： ./node_modules/.bin/webpack 入口路径 打包路径
全局：webpack 入口路径 打包路径
image.png
打包成功文件显示，多了bundle.js
image.png
5.命令打开预览
mac：open dist/index.html
win：start dist/index.html
open
预览.png
以上是简单的demo。
其他配置：阮一峰的教程
网友评论