Webpack 基础学习

基本概念：

1.      入口(entry)

webpack将创建所有应用程序的依赖关系图表(dependency graph)，图表的起点，称之为入口起点，（entry point）。入口起点的作用在于：1.webpack从哪里开始 2.遵循关系依赖图表要打包什么。也可以把起点理解为：根上下文或者是app的第一个启动文件。

在webpack中 适用 webpack config.js 中的entry属性定义入口。例如：

Module.exports = {

   Entry:  ‘./path/to/my/entry/file.js’

}

2.      出口(output)

使用webpack将资源归拢后要指定归拢后的资源的存放位置，也就是打包路径，归拢文件最终的存放位置。webpack.config.js 中的output属性定义了文件的出口。例如：

Module.exports ={

   Output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'my-first-webpack.bundle.js'

}

}

3.      加载器（loader）

Webpack的目标是，让webpack更关注与项目中的资源，而浏览器不许要考虑这些。Webpack把每个资源都做了模块处理，而且webpack只理解javascript。Webpack会把这些文件转化成模板，并且讲转化完的文件添加到依赖图中。

在高层面webpack的配置有两个目标。

1.      识别出应该对应的需要loder的那些文件

2.      讲转化的文件添加到依赖图中

Webpackconfig.js

Var Path =require (‘path’);

const config = {

  entry: './path/to/my/entry/file.js',

  output: {

   path: path.resolve(__dirname, 'dist'),

    filename: 'my-first-webpack.bundle.js'

  },

 module: {

    rules: [

     {test: /\.(js|jsx)$/, use: 'babel-loader'}

   ]

}

Moudule.export = config

在这里对单独的module设置了rules属性，里面也必需包括两个属性：test和use.

 作用：在require()/import语句解析为‘.js’ 或 ‘.jsx’ 的路径时，在你把它们添加并打包之前，要先使用 babel-loader 去转换”。

4.      插件

Loader只在每一个文件的基础上执行转化，而插件常用与在打包模块的“compilation”和‘chunk’生命周期执行操作和自定义功能。你可以在一个配置中多次使用插件用于不同的目的。所以你要使用new创建插件实例。

 

Webpack学习

Webpack概述

 

文档部分翻译内容来自：https://github.com/webpack-china/webpack.js.org

Webpack 是当下最热门的前端资源模块化管理和打包工具，他可以价格许多松散的资源模块按照依赖和规则打包成为符合生产环境部署的前端资源。还可以按需讲加载的模块进行代码分割。任何资源都可以视为模块。比如：CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Webpack已经是大部分前端打包工具的首选。Grunt，glup,browserfiy等都会沦为辅助甚至被替代。

 

webpack处理一些这些情况

1.  载入有问题的依赖项。

2.  意外引入一些不需要在生产环境中适用js css 库。

3.  意外的映入两次或者多次库。

4.  遇到css, js作用域的问题。

5.  需要交付项目时优化资产asset,但是你担心损坏某些文件。

入口/起点（entry points）

单个入口编写方法：

Webpack.config.js

Const config = {

         Entry:‘./path/to/my/entry/file.js’

}

Module.export = config; 

entry 属性的单个入口语法，是下面的简写：

const config = {

  entry: {

    main: './path/to/my/entry/file.js'

  }

};

对象语法(const 为es6语法中声明常量，一旦声明就不能呗修改)

Const config = {

Entry: {

  App: ‘./src/app.js’,

  Venders : ‘./src/Veors.js’

}

}

表面上看，webpack从app.js 和 vendors.js开始创建依赖图。这些图表是完全彼此分离。这种方式比较常见与只有一个入口起点的单页面应用程序。（single page application）

 

多页面应用程序

         Webpack.config.js

         Const        config = {

                   Entry:{

         Pageone: ‘./src/pagOne.js’,

         Pagetwo: ‘./src/ Pagetwo.js’,

Pagetree: ‘./src/ Pagetree.js’,        

}

}

这个告诉webpack·需要三个独立的分离的依赖图（如上面的实例）

在多页面中服务器将为你获取新的html文档。页面重新加载文档，并且资源呗重新下载，

’‘ 使用 CommonsChunkPlugin为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够在入口起点重用大量代码/模块，这样可以极大的从这些这些技术受益。’’(不知道什么意思    )

 

     输出output

。output 选项控制 webpack 如何向硬盘写入编译文件.（主意可以 存在多个入口起点，但是只能存在一个输出配置）

用法：

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

1.编译文件的文件名(filename)，首选推荐：// main.js || bundle.js || index.js

2.output.path 对应一个绝对路径，此路径是你希望一次性打包的目录

加载器

Loaders

对程序中的资源进行转化，他们是运行在node服务端的函数，讲资源文件作为参数来源，再返回新的资源文件。

具体作用：告诉webpack加载css文件，或者将TypeScript转化为JavaScript。首先安装相应的loader，npm install --save-dev css-loader

npm install--save-dev ts-loader

其次配置webpack.config.js,对每个.css文件使用css-loader.然后类似的对每个ts文件使用-loader:

 

module.exports = {

  module: {

    rules: [

      {test: /\.css$/, use:['css-loader'](/loaders/css-loader)},

      {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}

    ]

  }

};

配置

通过webpack.config.js

module.rules 允许你在 webpack配置中指定几个loader。

这是展示 loader 的一种简明的方式，并且有助于简洁代码，以及对每个相应的 loader 有一个完整的概述。

module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          { loader: 'style-loader'},

          {

            loader: 'css-loader',

            options: {

              modules: true

            }

          }

        ]

      }

    ]

  }

特性

Loader 支持链式传递。能够多资源适用流水线。Loader链式地按前后顺序进行编译。Loader链式中的第一个loader返回值给下一个loader。在最后一个loader，返回webpack所预期的JavaScript.

Loader也可以是异步或者同步加载。

Loader运行在node.js中。并且能够执行任何可能的操作。

Loader可以执行参数查询

Loader也可以使用option对象配置。

 

 

指南

安装

前提：最新版本的node.js

本地安装：

         npm install webpack --save-dev

 

npm install webpack@<version>--save-dev