正式学习react(二)

 

 

 

今天把上一篇还没学习完的 webpack部分学习完：

以前有说过关于css的webpack使用。咱们讲了 

ExtractTextPlugin 来单独管理css

讲了module.loaders下关于 css的写法：

module: {
    loaders: [
        // Extract CSS during build
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css'),
            include: paths
        }
    ]
},

还讲了关于css?modules这个query 的做用，下面咱们开始要用到Babel and babel-loader 来支持es6了！
默认你们都熟悉下面几种模块管理方式：

CommonJS

ES6

 

 

AMD

 

 

 

 上面全部的格式规范，webpack都支持.

--------------------------------------------------------------------------------------------------------------

 如今讲一下loader的定义：

 

loader (接收 字符串)

loaders  (接收 数组) 

 

上面的都是数组，因此都写的是loaders.

 

 

 webpack的loader 是讲顺序的，必定记住是从右往左，从右往左，从右往左。重要的事情说三遍！

 

loaders: ['style', 'css'] 就相对于 style(css(input)) ，二者没有差异。

---------------------------------------------------------------------------------------------------------------------------

说完顺序，再说参数，还记得以前说的modules吗？

 

Passing Parameters to a Loader

{ test: /\.jsx?$/,

   loaders: [ 'babel?cacheDirectory,presets[]=react,presets[]=es2015' ],

   include: PATHS.app

}

咱们以前都是这样写的，可是这样阅读性比较差，咱们推荐这样的写法：

 

{ test: /\.jsx?$/,

   loader: 'babel',

   query: { cacheDirectory: true,

                presets: ['react', 'es2015'] },

   include: PATHS.app

}

 

 

还有，我以前也推荐过 用include:这个key， 他接受string 也能够接收Array;

--------------------------------------------------------------------------------------------------------------------------------------------------------------

我以前介绍过ExtractTextPlugin 这个插件，来说css文件 output 到你的build里。

---------------------------------------------------------------------------------------------------------------------------------------------------------------

Loading CSS

  It parses the styles in the given include path (accepts an array too) while making sure only files ending with .css are matched.

The definition then applies both style-loader and css-loader on it:

大意就是说 你写了include,在你的module.loaders下。那webpack就只从这个文件下找.css 结尾的文件，匹配到就用style-loader 和 css-loader 来操做这些css文件。

 

 整个过程就是Webpack会判断这些文件，而后在匹配到的文件里将 @import 和 url()声明的字段，转化成require字段，而后就是用到style-loader了，

 下面咱们还会介绍 file-loader or url-loader.

 

PS：若是你想确保CSS也能运用sourcemaps 。你可使用['style', 'css?sourceMap']

而且设置output.publicPath为绝对路径。

 

固然，咱们可能在项目里用了less，sass。

 less-loader

 

  

 

 node-sass 

 

大家的 LESS/SASS文件里可使用import：

 

也能够直接从node_modules文件夹里加载

 

还有一些本身去了解。

 ---------------------------------------------------------------------------------------------------

致使咱们的项目变慢，极可能是由于咱们须要加载不少小资源。毕竟每一个请求附带了一个开销。

HTTP / 2将帮助在这方面和改变现状。

 

Webpack 是容许在你的代码里内联加载资源的，不过要使用url-loader这个加载器。他会把图片

翻译成BASE64在你的JavaScript bundles。

 -----------------------------------------------------------------------------------------------

Setting Up url-loader

作开发的时候，咱们使用url-loader 是不错的选择。由于你可能并不关心生成包的大小。

它有一个限制选项，在达到必定的限制条件之后被使用（延迟image到file-loader）。

具体的说就是,url-loader 是将一些url()里须要下载的资源，下载下来！而后用BASE64编码

内联到咱们bundles的js文件里。能够减小开销。可是若是文件太大，咱们可能等不了。

咱们就让他在浏览器里加载。这就是limit的做用。

就这样小于25k的图片将直接以base64的形式内联在代码中，能够减小一次http请求。

 style.js

 

webpack.config.js

 

 

运行webpack后：

 

 

-----------------------------------------------------------------------------

Setting Up file-loader

url-loader是对file-loader的上层封装，若是你忽略内联url,咱们能够直接使用 file-loader

 

The following setup customizes the resulting filename. By default file-loaderreturns the MD5 hash of the file's contents with the original extension:

开发者能够根据本身的需求本身定制文件名，默认 file-loader 会返回一个内容是MD5散列的原始扩展文件。

不过这里我本身定义了文件名，打包处理后：

 

关于打包 svg ， 压缩图片等loader，你们有兴趣本身去了解。

 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------

 咱们的website也常常须要用到各类字体：最后介绍一下字体的打包：

依靠file-loader或者url-loader 均可以实现字体打包，最简单的方式：

 

 想弄的好一点：

 

 

 有时候为了权衡网站的性能与美观，咱们可能会放弃内联方式【增长request】，直接选择打包，并且打包好多种字体样式：

 

 

---------------------------------------------------------------------------------------到此为止，webpack基本内容介绍，最后一篇会介绍webpack一下原理-------------------------------