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自带的不需要额外安装。

效果:

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:,height: }} className='bgCPng'></div>

webpack.config.js中：

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

效果：

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

使用：