webpack

介绍

权威版
自我版：

使用

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 ：
                          修改引用
      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"   
           })   
      ]