介绍
权威版
自我版：
使用
1 Google - webpack
认准官网大门
2 MoudelBundler - tutorial
documentation - 文档，给高手研究用的。
introducation - 介绍，单词储备够了吗。
tutorial - 教程，新手先看这里吧。
3 Copy
● -1 安装Bush / Node / Npm
● 0 设置npm，调整使用环境
npm config set loglevel http 得到每一个请求
npm config set progress false 关闭进度条
npm config set registry https://registry.npm.taobao.org/ 从淘宝下载
npm config delete registry 如果出现问题就杀了
touch ~/.bashrc; echo 'export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"' >> ~/.bashrc 下载 phantomjs
touch ~/.bashrc; echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc 下载 SASS
source ~/.bashrc
● 1 按官网教程走一遍，打开index.html，看到'Hello,webpack'，已经成功了呢！
1 安装webpack
mkdir webpack-demo && cd webpack-demo 新建文件夹并进入
npm init -y 初始化配置文件package.json
npm install --save-dev webpack 安装并写入依赖
2 抄例子
mkdir app && cd app
touch index.js 新建 app/index.js copy
touch index.html 新建 index.html copy
3 安装依赖
npm install --save lodash 根据提示安装lodash
4 使用依赖
照例 app/index.js copy import引入依赖
照例 index.html copy 主文件改为bundle.js（参照6）
5 配置webpack
新建 webpack.config.js copy 这是webpack的配置文件
6 使用配置
配置文件里写了 入口entry / 出口output = bundle.js / 出口路径path = dist文件夹
./node_modules/.bin/webpack --config webpack.config.js
▲ 运行这个命令就会自动生成dist/bundle.js
7 改良
上面的命令行太长好麻烦，在package.json里设置个快捷键
以后改完代码运行 npm run build 就会自动打包好 `
● 2 复习
目前的文档结构：
webpack-demo
▼ app
▶index.js 主文件
▼ dist
▶bundle.js 重点：把依赖和代码打包后的文件
▼ node_modules
▶ ...... 所有依赖包
index.html
package.json demo的配置
webpack.config.js webpack的配置
4 Run
● 部署到GitHub
1 新建仓库
New repository 一键开启新仓库 & 输入仓库名
2 按照提示上传
git init
git config user.name 名字
git config user.email 邮箱
echo '/node_modules/' > .gitignore
git add .
git commit -m 'first commit'
git remote....
git push....
3 刷新后可以看到部署完成，来在线预览一下：
YourName / webpack-demo
[齿轮标志]settings
进入 -- GitHub Pages -- Source
-- none=> master brunch -- Save
得到预览地址 https://YourName .github.io/webpack-demo/
然后加上index.html => 找到正确的页面地址 就可以线上预览了
5 Modify
● 根据引入loadsh的过程，我们可以改一改梨子，引入其他文件
1 安装依赖
npm i -S jquery
2 使用依赖
app/index.js 使用import引入
3 合并代码
npm run build 把index.js以及使用的依赖全部合并到bundle.js里
6 Tip
● 快捷配置
* package.json中配置的script:
● bundle.js文件过大
"build": "webpack-p" npm run build==合并&压缩
● 每次都要手动合并好麻烦
"dev": "webpack --progress --watch" npm run dev == 自动更新
● 合并完了还要手动刷新好累
侧边栏--Development ：
<script src="/bundle.js"></script> 修改引用
npm install webpack-dev-server --save-dev 安装插件
"dev": "webpack-dev-server --open" npm run dev == 自动刷新
竟然有后遗症：上传到GitHub找不到bundle.js ╥﹏╥
只能用蠢办法：npm uninstall webpack-dev-server 删除插件
● 打包css
1 安装css加载器 npm install css-loader style-loader
2 修改配置 webpack.config.js
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
3 在文件中引用 require(' ./css/index.css')`
● **打包jpg **
● **引入JQ **
1 安装jq npm install jquery --save-dev
2 修改配置 webpack.config.js
var webpack = require("webpack");
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
]