原先文链接
https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460\#.g5dc9raag

要么 当你开用webpack时索要掌握之一些必要知识

点击这里至最后之GitHub
代码库。

Webpack
可到头来一宗时最伟大的前端开发工具。它的模块包和富有现代化的前端工作流(Babel
ReactJs CommonJs, etc)合作的比方胶似漆.以下是自家一个webpack菜鸟的学习心得

开搞

Webpack 共识

  1. webpack的特级伴侣是NPm 而不 Bower
  2. 择相同种模块系统(AMD CommonJS ES6 )

安装 webpack

npm install webpack -g

极致基本的构建

以你的根目录里创建两只文本 index.html app.js

app.js:

document.write('welcome to my app');
console.log('app loaded')

index.html:

<html> 
  <body> 
  <script src="bundle.js"></script> 
  </body>
</html>

打开你的控制台,运行:

webpack ./app.js bundle.js

以上命令 使用 打包命令(webpack) 引用 app.js 以及变化导出的文件 bundle.js
(译者注:这里大家可能持有疑惑,把一个js变成任何一个js有什么含义。 假如
当你的 app.js 引用了其他的js 或者 css 时,webpack 就会见用她们均打包
甚至减缩成一个文本, 怎么样?是休是更为未用当html里描写冗长的scrpit
标签了?)

概念一个安排文件

Webpack 里之配置文件是一个为主的commonJs 模块。
这个布局文件包含了档次里拥有的安排 , loaders(稍后解释),
以及其它类型有关信息

当你的清目录里创建 一个 webpack.config.js 文件 ,加上如下代码

module.exports = { 
  entry: "./app.js", 
  output: { filename: "bundle.js" }
}

entry— 对项目里最顶层的 一个文书 或者
一组文件,在此项目里我们唯有所以了 app.js

output— 包括输出配置的一个对象。 在咱们的门类面临,我们一味给filename
关键字 指定了 bundle.js, 即webpack 将见面构建的输出文件

现 打开命令行开始运行我们的app吧!

webpack

一经我们建了 webpack.config 文件, webpack 命令
就会见及进我们的配备来构建输出文件

扩展config 文件 和 webpack 的功能

watchmode 监察模式

当监督模式中,Webpack
会监察你的拥有文件,任一文书有所改观,它就会及时又构建,重新创设而的输出文件。
有有限种植办法来允许监察模式。

1 命令行 敲

webpack --watch

2 在我们的部署文件里增长一个重中之重字 watch 并要为true

module.exports = { 
  entry: "./app.js", 
  output: { filename: "bundle.js" },  
  watch: true 
}

如此,webpack 就会自动捕捉你的文本变动啦

Webpack Dev Server (Webpack 开发者服务器)

Webpack 有一个web 服务器 叫做 webpack-dev-server, 我们现本土安装一下其

 npm install webpack-dev-server -g

当指令行中运行下面的一声令下

 webpack-dev-server

下一场 请在浏览器打开
http://localhost:8080/webpack-dev-server/
, 你就会意识你的app 正在那里运行啦,伴随着那些 logs ~~

呼吁小心 webpack 文档中之等同句子话

“这个 dev server 使用了Webpack 的查访模式(watch
mode)。它会用结果文件保留运行在内存中设休是格外成至硬盘里。所以你连无见面视新的bundle.js,
需要的话你还是的敲入 webpack 命令”

当webpack dev server 运行时,
你晤面意识而于app里召开的外变化还见面实时呈现在服务器里(热加载
hot-loading)

热加载是默认使用的,如果您想禁掉并且失去丢顶部那么条 app ready status
栏,就以浏览器中一直 输入
http://localhost:8080/

要假定利用热加载,但是去丢顶部之 App ready status 栏, 就就此底的 命令,

webpack-dev-server --inline

下一场打开
http://localhost:8080/
你晤面发现 热加载还于 讨厌的 app ready 栏已经休以了

构建多独文件

  1. 待之文件 在公的品种中投入 looger.js 文件 在 logger.js,
    加入如下代码

console.log('logger.js is now loaded...');

当 app.js 中 将如下代码添至文件的上方 以获 logger.js

require('./logger');

现今, 关闭后再次运行 webpack-dev-server 你会当控制台中看看
刚刚添加的log

  1. 复添加一个入口文件及webpack.config.js 在你的品类受到加入
    global.js,并加上如下代码,

console.log('global.js is now loaded...');

今日,打开 weboack.config.js, 给 entry 关键字 赋一个数组

module.exports = {
  entry: ["./global.js", "./app.js"], 
  output: { filename: "bundle.js" }
}

双重 关闭 运行 webpack-dev-server 你会意识 global.js 的log
也油然而生于控制台了

webpack 加载器 和 预加载器

加载器让webpack 学会新的效力

文档里说 “加载器可以被你使用 require 或者
‘加载’他们是先处理那些文件。加载器们发硌像其它工具里之 ‘任务’
并且以提供一个牛逼的法子来处理前端构建步骤。有的加载器可以拿像coffeescript之类不同的话音转成
javascript,有的加载器把图纸转来数地址。有的竟会叫您以js里require
css文件!”

以下, 我们且安装了片独加载器: Babel 和 JSHint.
开始之前。在咱们开为此这些loaders之前,我们得先安装几单npm 模块。

率先 使用 npm init 命令创建一个 package.json文件。 然后每当Terminal 里
敲入:

npm install babel-core babel-loader jshint jshint-loader 
node-libs-browser babel-preset-es2015 
babel-preset-react webpack --save-dev

以见面把这些模块保存也付出之仗

在Webpack中使用Babel

如今我们曾作好了Babel, 开始勾画点 es6 吧,然后将babel loader 加进来。

  1. 打开 logger.js 删掉 console.log 语句子,
    用下面代码代替“`javascript
    let checkName= (firstName, lastName) => {
    if(firstName !== ‘nader’ || lastName !== ‘dabit’) {
    console.log(‘You are not Nader Dabit’);
    } else { console.log(‘You are Nader Dabit’);
    }
    }
    checkName(‘nader’, ‘jackson’);

2. 把logger.js 改名为 logger.es6

3. 打开 webpack.config.js 并且 加入 babel loader. 若要在webpack里加入loader,必须先创建已个名为 module 的对象。module对象里再加入loaders 数组,数组里依次创建对应的loader 对象。 如下

```javascript
module.exports = { 
  entry: ["./global.js" , "./app.js"], 
  output: { filename: "bundle.js" }, 
  module: { loaders: 
                  [ { test: /\.es6$/, 
                      exclude: /node_modules/, 
                      loader: 'babel-loader', 
                      query: { cacheDirectory: true,  
                                  presets: ['react', 'es2015']  
                    } } ] }, 
resolve: { extensions: ['', '.js', '.es6'] }, }

如上你晤面发现,我们为率先单loader加入了几乎单key

  1. test— 一个正则表达式来判断何种文件会通行在这loader里。
    我们加了一个 es6的拓展名

  2. exclude — 这个loader 应该忽视哪些文件。 在斯,我们投入了
    node_modules 文件夹

  3. loader — 我们即将利用的loader名(babel-loader)

  4. query –你得经过写查询语句或者查询属性来拿参数传于loader

  5. cacheDirectory — 默认 false.
    当设定后,给得的文书夹会缓存加载器的结果。之后的webpack构建就会见先行尝试从缓存中读取来避免安规的Babel编译过程。

咱吧进入了一个叫做也 ‘resolve’ 的要紧字到我们的 module.exports 对象被、
resolve
可以于咱们定义好何种类型的文本不欲被起特定文件称后缀就可知被拍卖。这样我们得以如下语句

require('./logger');

而非

require('./logger.es6');

兹咱们曾经足以回到我们的类里来了。关掉然后敲

webpack-dev-server 

再运行我们的 web server, 你虽能收看新的log “You are not Nader Dabit”

恭喜!你正在webpack上运行babel啦

始建一个开端剧本

以此其实是npm的一个表征, 但确实是来你值得做的事务

以package.json, 有一个scripts
的基本点字。用一下情代替你本来script中之情节

"scripts": { "start": "webpack-dev-server" }

兹我们便会为此

npm start 

来很快的开启 web server啦

因为咱们之后会没完没了进入更多参数,这样做真正省多业乎###
分离的成品跟支付构建而一旦运行有产品保证, 让webpack 压缩你的code,

吃webpack加个 -p 旗帜然后虽会产生一个压缩包

webpack -p

行文不同之布文件来应针对成品和开支

安装 strip-loader:

npm install strip-loader --save-dev

strip-loader 可以将随意的函数从里的产品代码中退出出去(稍后咱们应用)

创 webpack-production.config.js, 写下如下代码:

var WebpackStripLoader = require('strip-loader'); 
var devConfig = require('./webpack.config.js'); 
var stripLoader = { 
      test: [/\.js$/, /\.es6$/], 
      exclude: /node_modules/, 
     loader: WebpackStripLoader.loader('console.log') }

devConfig.module.loaders.push(stripLoader);
module.exports = devConfig;

  1. WebpackStripLoader — 我们要的 strip-loader

  2. devConfig — 原始的 webpack 配置文件

  3. var striploader
    我们创建的一个新loader对象。唯一值得一提到是下边这行

      loader:WebpackStripLoader.loader('console.log')  
    

以当下我们被 strip-loader 去丢任何
console.log语句WebpackStripLoader.loader() 可以入任意多的参数

  1. devConfig.module.loader.push(stripLoader) — 我们以新loader
    放上原来、的部署里

  2. module.exports =devConfig — 导出新的布局对象
    然后每当极端里运行下面的代码

     webpack --config webpack-production.config.js -p
    

这次运行webpack带在config 标志,让我们使用定义好之安排文件。 -p
压缩了产品的代码打开bundle.js 你就算见面发觉我们的保证里早就没有console 了

相关文章

网站地图xml地图