webpack学习

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。比如，我们vue组件化开发，会用 “.vue” 文件，这种文件不会被浏览器所解析，所以需要用webpack来 “格式化” 他们，让他们变为浏览器可以解析的文件格式。还有，还有，用webpack，就可以愉快的使用es6的语法啦！那么webpack主要有哪些特性呢？

1.entry: 入口

2.output: 输出

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

配置webpack的output基本属性：

filename: 输出文件的文件名

path: 目标输出目录path的绝对路径

const config ={

    entry: {

    main: '../src/index.js'

    },

    output: {

        filename:'bundle.js',

        path:'/home/proj/public/assets'

    }

}

module.exports = config;

3.加载器 loaders

loader用于将模块的源代码进行转换，loader 可以使你在 import 或"加载"模块时预处理文件。

loader可以将不同的语言转换为javascript. 可以使用loader告诉webpack加载css文件，或者把typeScript转换为javascript  .但是必须用npm安装css-loader.

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js

module.exports={

module:{

    rules:[{

        test:/\.css$/,use:'css-loader'},

        {test:/\.ts$/,use:'ts-loader'}

    ]}

};

如何编写一个Loader?

loader 是导出为 function 的 node 模块。

当资源应该由此 loader 转换时，调用此函数。

4.插件(Plugins)

插件的目的在于解决Loader无法实现的事

5.配置(Configuration)

因为 webpack 配置是标准的 Node.js CommonJS 模块，你可以做到以下事情：

    通过 require(...) 导入其他文件

    通过 require(...) 使用 npm 的工具函数

    使用 JavaScript 控制流表达式，例如 ?: 操作符

    对常用值使用常量或变量

    编写并执行函数来生成部分配置

6.模块(Modules)

在模块化编程中，开发者将程序分解成离散功能块，并称之为模块。

什么是 webpack 模块？

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

ES2015 import 语句

CommonJS require() 语句

AMD define 和 require 语句

css/sass/less 文件中的 @import 语句。

样式(url(...))或 HTML 文件()中的图片链接(image url)