2019-04-01

作者: 蓝子_23d0 | 来源:发表于2019-04-01 19:50 被阅读0次

day6
当你觉醒，大自然也会醒来
征🌷(=^▽^=)啦啦啦…
2019-4-1晨间日记
Mr. L 的ScalersTalk第四轮《新概念》朗读持续力训
荆的ScalersTalk第四轮新概念朗读持续力训练Day173
11.周记week14
3 按月统计观影人数和各星评价数 - ml-100k
Mixin Network 主网上线 2 月纪要
梦境与梦想

webpack （版本 4.29.6 )入门

在看webpack官网之前，先打开Git Bash，我们要设置一下npm，让npm下载得更快一些
1.运行npm config set loglevel http，让你知道npm发的每一个请求
2.运行npm config set progress false，关闭那个无聊的进度条
3.运行npm config set registry https://registry.npm.taobao.org/，从淘宝的服务器下载各种包。不过这会让你在运行npm adduser的时候出问题，想要恢复成原样，只需要运行npm config delete registry即可。
4.运行touch ~/.bashrc; echo 'export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"' >> ~/.bashrc让npm从淘宝下载phantomjs
5.运行touch ~/.bashrc; echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc让npm从淘宝下载SASS
6运行source ~/.bashrc

接着就是正式的操作：

1.建立文件夹

mkdir webpack-demo && cd webpack-demo
npm init -y // 初始化，得到package.json文件
npm install --save-dev webpack //安装

2.创建子文件夹app和index文件

mkdir app && cd app
touch index.js

3.编辑app / index.js

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

注意上面代码中的.join，这个实际上是lodash暴露的全局变量。

4.在项目的根目录中创建一个index.html文件。
touch index.html
目前的文件结构:(注意index.html不在app里）

.
├── app
│   └── index.js
├── index.html
└── package.json

5.编辑index.html

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

为了使用lodash，HTML使用脚本引入了lodash v4.16.6。
我们可以用更高端的方法引入lodash。

# 请先确保命令行当前所在目录是 webpack-demo
npm install --save lodash
# 上面命令可以简写成 npm i -S lodash

好了，lodash的源代码就被下载到./node_modules/lodash/目录中。
然后在app / index.js的第一行添加
import _ from 'lodash';

6.修改app / index.html

<html>
   <head>
     <title>webpack 2 demo</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="app/index.js"></script>
+    <script src="dist/bundle.js"></script>
   </body>
 </html>

-表示删除这一行，+表示新增一行
然后运行
./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development

将app / index.js变成dist / bundle.js
浏览器打开index.html，如果你看到Hello webpack，说明你运行成功了.

7.整体文件结构

.
├── app
│   └── index.js
├── dist
│   └── bundle.js
├── index.html
├── node_modules/
└── package.json

8.用git上传到github

# 确保你在项目根目录，也就是webpack-demo 目录
git init
git config user.name 你的名字
git config user.email 你的邮箱
echo '/node_modules/' > .gitignore
git add .
git commit -m '完成 webpack 的第一个例子'

然后去GitHub上新建一个repo，（你在新建repo的时候，除了repo name，其他的什么都不要写!!!）

image.png

然后一行一行地复制图中所指的两行代码，运行完后，刷新GitHub.

9.引入jQuery
如果我们要在页面里面引入jQuery，那么就是

# 确定你在 webpack-demo 目录
npm i -S jquery

这样一来jquery就会被下载到node_modules里面。

然后我们在app / index.js里面引入

jquery
import _ from 'lodash'
+import j from 'jquery'

 function component () {
-  var element = document.createElement('div');
+  var element = j('<div></div>');

   /* lodash is required for the next line to work */
-  element.innerHTML = _.join(['Hello','webpack'], ' ');
+  element.html(_.join(['Hello','webpack'], ' '))

-  return element;
+  return element.get(0);
 }

 document.body.appendChild(component());

然后再次运行./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development
打开index.html。如果你看到Hello webpack，那就说明jquery也引入成功了.
运行成功请提交（commit并推）到GitHub！

10.改进运行办法
每次运行都需要输入./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development启动，太长了记不住.
在项目根目录新建并编辑webpack.config.js：

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后 ./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development 就可以换成:./node_modules/.bin/webpack --config webpack.config.js --mode development
不过这句话依然很长，每次输入很麻烦，另一个办法：修改package.json：

 "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],

然后运行npm run build

# npm run build

> webpack-demo@1.0.0 build /tmp/webpack-demo
> webpack

Hash: e80fc48906e74c40817a
Version: webpack 2.3.2
Time: 525ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  813 kB       0  [emitted]  [big]  main
   [0] ./~/jquery/dist/jquery.js 268 kB {0} [built]
   [1] ./~/lodash/lodash.js 540 kB {0} [built]
   [2] ./app/index.js 277 bytes {0} [built]
   [3] (webpack)/buildin/global.js 509 bytes {0} [built]
   [4] (webpack)/buildin/module.js 517 bytes {0} [built]

运行 npm run build 就等于运行 node_modules 里的 webpack 可执行文件，这个可执行文件会自己去 webpack.config.js 里找 app/index.js、dist 和 bundle.js 三个关键词。

11.因为bundle.js体积很大，所以对它进行压缩
先install uglifyjs-webpack-plugin:
npm install uglifyjs-webpack-plugin --save-dev
然后把uglifyjs-webpack-plugin添加到webpack config.举个例子：
webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

当然还可以添加其他Options

12.每次写完代码都要 npm run build 是不是很烦？

我们需要 watch：webpack 监听文件变动，一旦我们保存了文件，它就重新 build 代码。官方文档Development这一章节就是专门介绍如何快速开发的.可以根据自己需要看。到达 webpack Watch Mode 这一章节。这就是我们想要的。接下来我们来添加一个 npm script

 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
+ "dev": "webpack --progress --watch"
   },
   "keywords": [],

运行 npm run dev
你会发现，光标停在那里，无法退出程序。

如果你想要退出，请按CTRL加C。但是现在先别按，我们需要验证 watch 功能。

打开 index.html，编辑 app/index.js，把 Hello 改成 Hi，保存。

你会发现 webpack 自动 build 了。

这时刷新 index.html，你就看到了 Hi.

13.要是能帮忙刷新浏览器就更好了。因此我们使用webpack-dev-server
npm install --save-dev webpack-dev-server
接着修改 index.html：

<title>webpack 2 demo</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
    <script src="/bundle.js"></script>
  </body>
</html>

然后修改package.json：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack ",
  -  "dev": "webpack --progress --watch"
   + "dev": "webpack-dev-server --open"
  },

改完之后，我们就不能再直接打开 index.html 了，因为它引用的是 /bundle.js，用 file:// 协议打开 index.html 的话，会请求 file:///bundle.js，显然这个文件不存在。
我们只能运行 npm run dev，然后浏览器就会自动打开 http://localhost:8080/ ，你会看到 index.html 页面。

接下来如果我们改一下 app/index.js，你就会发现

bundle.js 自动打包
http://localhost:8080/ 自动刷新

但是你要注意，期间 dist/bundle.js 不会自动变化，你在部署代码之前，依然要运行 npm run build 才行。

参考资料：
1.https://jirengu-inc.github.io/project-react-1/index.html
2.https://stackoverflow.com/questions/49006389/webpack-error-in-multi-src-index-js-dist-bundle-js
3.https://www.npmjs.com/package/uglifyjs-webpack-plugin
4.https://webpack.js.org/guides/development/

day6
2019-04-01
当你觉醒，大自然也会醒来
来源：全息宇宙 2019-04-01 作者/Eckhart Tolle 【进入未显化状态的大门】一...
征🌷(=^▽^=)啦啦啦…
简书钻首席小管家已关注 179.928 · 字数 839 · 阅读 58345 2019-04-01 14:39...
2019-4-1晨间日记
2019-04-01 【践行人员】袁顺娟【践行天数】152/1000 【今日天气】阴【昨日早睡】22:30 【...
Mr. L 的ScalersTalk第四轮《新概念》朗读持续力训
2019-04-01, Day 176, starting at 2018-10-08, 新概念英语第三册 Les...
荆的ScalersTalk第四轮新概念朗读持续力训练Day173
201901 周一 Day173 练习材料：原文[Day 173 2019-04-01]L40-2: Wh...
11.周记week14
CF723 2019-04-01 周#回顾本周进度本周Plan（week13 25.18-3.31） 1.回家...
3 按月统计观影人数和各星评价数 - ml-100k
3.1 数据集 ml-100k 3.2 分析过程建表，日期为 ‘2019-04-01 23:33:08’ 格式。...
Mixin Network 主网上线 2 月纪要
2019-04-01 ~ 2019-04-30 纪要 2019-04-10主网已支持 CNB 提现，API 服务待...
梦境与梦想
2019-04-01原创（一）“你从梦中走来” （情景一） “天水，天水，等我一下，干嘛走那么快呀！” “哥，你...