在React Native中如何使用webpack?

1.webpack是什么?

   打包前端项目的工具(为项目提高逼格的东西)。

 

2.webpack的基本命令

  webpack#最基本的启动webpack命令

  webpack-w #提供watch方法,实时进行打包更新

  webpack -p #对打包后的文件进行压缩

  webpack -d #提供SourceMaps,方便调试

  webpack --colors #输出结果带彩色

  webpack --profile #输出性能数据,可以看到每一步的耗时

  webpack --display-modules #默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块

 

3.webpack常用调试参数

  webpack-dev-server 在 localhost:8080 建立一个 Web 服务

  devtool eval 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号

  progress 显示合并代码进度

  colors 命令行中显示颜色!

  content-base build - 指向设置的输出目录

使用:

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --port 9090 --devtool cheap-module-eval-source-map --progress --colors --hot --content-base ./"}

 

 

 4.resolve中extensions的使用

resolve: {
    extensions: ['', '.js', '.jsx']}

 

  resolve: 定义了解析模块路径时的配置,常用的就是extensions; 可以用来指定模块的后缀,这样在引入模块时就不需要写后缀,会自动补全。

  怎么个补全法?

import { ModalSuccess, 
         ModalError, 
         Header } from '../../component/index.jsx';//下面的不需要加jsx后缀import { ModalSuccess, 
         ModalError, 
         Header } from '../../component/index';

 

 

 5.output的使用

  output用来定义打包后输出的文件目录以及名称

output: {
    filename: "build.js",
    path: __dirname + '/assets/',
    publicPath: "/assets/"}

 

  具体含义:

  output:模块的输出文件,其中有如下参数:
  filename: 打包后的文件名
  path: 打包文件存放的绝对路径。
  publicPath: 网站运行时的访问路径。

 

6.react组件的分离,进行独立打包

 我们使用webpack一般配合react的开发。

   分离出这两个组件可以减少核心代码的臃肿。

entry : {
		app:'./app.js',
		vendors:['react']
	}

 

 这个是在entry中进行配置。   

plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
    ]

 

 CommonsChunkPlugin 是webpack自带的不需要额外安装。

 效果:

在React Native中如何使用webpack?-图片-1

 

7.react,react-dom注入全局,免得每个文件都用引入

plugins:[
          new webpack.ProvidePlugin({
            "React": "react",
            "ReactDOM": "react-dom"
        })
    ]

 

  这里的 ProvidePlugin插件是webpack自带的不需要独立安装。

 

8.使用url-loader将图片转成64位,减少http的请求。

   安装:npm install url-loader --save-dev

   css中:

.bgCPng{
    background:url(../img/car.png) repeat fixed center;}

 

   jsx中:

import '../resources/css/clearDefault.css';...<div style={{ width:300,height:300 }} className='bgCPng'></div>

 

  webpack.config.js中:

module:{	loaders:[{		test:/\.(png|jpg)$/,		loader:'url?limit=25000'
	}]
}

 

 效果:

    在React Native中如何使用webpack?-图片-2

 

9.加载less/sass

   安装:npm install less-loader 或者 npm install sass-loader

// LESS
    {
      test: /\.less$/,
      loader: 'style!css!less'
    },// SASS
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    }

 

 

 10.hash

  [name] - 反回入口名称

  [hash] - 反回创建的hash

  [chunkhash] - 反回一段特定的hash

  使用:在React Native中如何使用webpack?-图片-3

  在React Native中如何使用webpack?-图片-4


评论

*
*