扩展config 文件 和 webpack 的功能

概念一个安插文件

Webpack 里的安顿文件是二个中心的commonJs 模块。
这一个布局文件包涵了花色里有所的配备 , loaders(稍后解释),
以及其余项目有关音信

在你的根目录里创设 2个 webpack.config.js 文件 ,加上如下代码

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

entry— 指向项目里最顶层的 3个文件 或许一组文件,在这几个项目里我们只用了 app.js

output— 包涵输出配置的二个对象。 在大家的品类中,大家只给filename
关键字 指定了 bundle.js, 即webpack 将会营造的出口文件

明日 打开命令行开始运转我们的app吧!

webpack

若是大家创设了 webpack.config 文件, webpack 命令
就会跟进大家的安插来创设输出文件

最基本的打造

在您的根目录里创制五个公文 index.html app.js

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

Webpack 有2个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 栏已经不在了

始建2个从头剧本

以此实际是npm的2个表征, 但确实是些你值得做的事情

在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
    我们制造的2个新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 了

webpack 加载器 和 预加载器

加载器让webpack 学会新的效用

文档里说 “加载器可以让你使用 require 只怕‘加载’他们是预先处理那2个文件。加载器们有点像其余工具里的 ‘职务’
并且还要提供2个牛逼的不二法门来拍卖前端营造步骤。有的加载器可以把像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— 3个正则表明式来判定何种文件会通行在这几个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啦

或然 当你从头采纳webpack时索要驾驭的一对须求知识

点击那里到最终的GitHub
代码库。

Webpack
可算是一项最新最宏大的前端开发工具。它的模块包和持有现代化的前端工作流(Babel
ReactJs CommonJs, etc)合营的如胶似漆.以下是本身多个webpack菜鸟的学习心得

index.html:

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

开拓你的控制台,运营:

webpack ./app.js bundle.js

以上命令 使用 打包命令(webpack) 引用 app.js 以及变更导出的文书 bundle.js
(译者注:那里大家莫不拥有怀疑,把1个js变成另两个js有怎么着意义。 倘若当你的 app.js 引用了其它的js 可能 css 时,webpack 就会将她们全都打包
甚至压缩成2个文件, 怎么着?是否再也不用在html里写冗长的scrpit
标签了?)

watchmode 监察格局

在督查形式当中,Webpack
会监察你的具有文件,任一文件有所改观,它就会立时重新创设,重新创建你的出口文件。
有三种办法来允许监察形式。

1 命令行 敲

webpack --watch

2 在大家的配置文件里充分一个重点字 watch 并设为true

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

那样,webpack 就会活动捕捉你的文书变动啦

app.js:

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

安装 webpack

npm install webpack -g

开搞

创设三个文件

  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 共识

  1. webpack的极品伴侣是NPm 而非 Bower
  2. 选料一种模块系统(英特尔 CommonJS ES6 )

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

相关文章

网站地图xml地图