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
使用：