webpack 看我就够了(二)

开始

webpack能够通过npm来安装。可以通过npm install -g webpack来全局安装,或者作为项目的以来关系来安装npm install --save-dev webpack

新建一个小项目

让我们创建一个小的项目来应用webpack。

先新建一个空的文件夹,然后初始化一个package.json,那什么是package.json呢?是一个nodejs的包依赖关系清单,类似于rails的gemfile,通过npm init来初始化一个package.json。

然后我们来安装webpack作为该项目的依赖关系npm install webpack --save-dev

在项目初始化和webpack安装完之后,让我们创建我们的项目的目录结构(其中node_modules文件夹是该项目所依赖的包安装的位置)。首先我们创建app文件夹来放我们的项目的源码,然后创建一个public文件夹来放一些浏览器中用的文件,其中包括index.html和webpack打包app中源文件产生的文件。app文件夹中有两个文件一个main.js一个Greeter.js。
如图:

webpack 看我就够了(二)_第1张图片
Paste_Image.png

这个index.html将包括基本的html结构,用于下载了所需的assets(js、css、image等等)。

具体如下:

 
  
  
  
  Webpack Sample Project
  
  
    

下面来让我们看一看main.js和Greeter.js。Greeter.js是一个简单的函数用于输出一个打招呼的信息。main.js用于引用Greeter.js这个包,然后把打招呼的信息插入到页面上。
Greeter.js具体代码如下:

module.exports = function(){
  var greet = document.createElement('div');
  greet.textContent = 'Hi there and greeting';
  return greet;
}

main.js具体代码如下:

var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter);
第一次用webpack打包(bundle)

webpack的基本用法是webpack {entry file} {destination for bundled file}
记住webpack需要你指定一个输入文件(entry file),然后webpack通过这个输入文件来分析整个项目,然后打包为一个最终的文件。
如果没有把webpack全局安装,你也可通过调用node_modules中的package来实现打包,例如:
node_modules/.bin/webpack app/main.js publi/bundle.js
如果你用浏览器打开index.js你可以看到结果,如图:

webpack 看我就够了(二)_第2张图片
Paste_Image.png
定义一个配置文件

webpack有很多高级的选项和配置,比如不同的资源利用不同的loader,可以配置不同的plugin等等。尽管可以通过命令行传参数来实现功能,但是每次打包都很复杂而且容易出错。所以更好的一种方式是写一个配置文件,这个配置文件来告诉webpack怎么来打包。

webpack.config.js内容如下:

module.exports = {
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  }
}

其中__dirname是一个nodejs的global变量,指代当前执行文件所在的文件夹

现在你可以执行webpack,不需要其他过多的参数,因为webpack会自动寻找webpack.config.js,读取相关的配置信息,根据配置信息来执行打包。

执行如下图:

webpack 看我就够了(二)_第3张图片
Paste_Image.png
添加一个任务快捷命令

执行一条长长的命令,尤其没有把webpack全局安装的同学,要执行node_modules/.bin/webpack,而且可能添加一些其他的参数不如node_modules/.bin/webpack --colors等等,是不是非常不方便,下次执行的时候还可能拉掉一些参数,所以我们来建立一个执行任务命令的快捷命令 'npm start'。这个功能可以轻松的通过配置package.json来实现,如下:

{
"name": "webpack-sample-project", 
"version": "1.0.0",
"description": "Sample webpack project", 
"scripts": {
  "start": "node_modules/.bin/webpack" 
},
"author": "Cássio Zen", 
"license": "ISC", 
"devDependencies": {
  "webpack": "^1.12.9" 
}
}

其中start在package.json中是一个特别的关键字,可以通过'npm start'来执行。当然你可以创建任何你想到的命令,但是执行方式有所不同,是通过执行'npm run action'来执行其中的action是你所建立的命令。

产生source map

webpack有一个非常重要的配置参数,可以在开发的时候产生相当有帮助和重要的信息-source map。

当把所有的文件都打包到一个文件中,在浏览器中调试,是不是非常不爽,不知道在源码中的哪个文件的哪行出了bug,再加上如果有编译的过程就更苦逼了,比如es6或coffeescript转js。source map的作用就是解决这个困境的,就是在浏览器中出现问题时能够自动映射到源文件中,知道是哪个文件的哪一行出了问题。是不是非常有用?

在webpack配置object中是通过devtool来设置sourcemap的,这里有几个选择,下面我们来具体解释他们之间的区别吧

  • source-map 这个是产生一个完整的全面的source map,这个选项的效果最好,但是它会降低build的效率
  • cheap-module-source-map 这个是选项也是单独产生一个source map文件,但是去掉了具体列的信息,所以会降低调试的方便,却提高了build的效率。
  • eval-source-map bundle源代码是利用'eval', source map完整的和bundle的结果在同一个文件中。这个有和好的调试效果,同时不影响build的效率,但是可能会有执行效率和安全的缺点,但是在开发的过程是一个很好的选择。
  • cheap-module-eval-source-map 这个是build效率最高的方式,和eval-source-map相似,但是去掉了具体的列的信息。和eval-source-map相似,它有执行效率和安全性的缺点,所以不适合用在生产环境中。

正想你看到的一样,这四个选项是从上而下build速度越来越快,但是越上面的越产生没有缺点的source map。

特别在中小型的项目中,eval-source-map是一个不错的选择,它build效率比较高,同时调试比较方便,同时我们可以写一个专门用于生产环境的webpack配置文件。后面会讲到具体的应用。

这里的配置信息如下:

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirnam + '/app/main.js',
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  }
}

你可能感兴趣的:(webpack 看我就够了(二))