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 如果看到类似下面的信息,就说明安装成功
--方法.直接安装指定版本就行了,如安装 xx 版:
npm install --save-dev webpack@3.10.0
图片.png
安装成功后的文件
image.png
2.使用
文件结构:
image.png2.--安装插件
$ 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 入口路径 打包路径
打包成功文件显示,多了bundle.js
image.png
5.命令打开预览
mac:open dist/index.html
win:start dist/index.html
预览.png
以上是简单的demo。
其他配置:阮一峰的教程
网友评论