webpack虽然是Facebook专门为了它的React框架而开发的前端自动化工具。但并不是没有了React，它就无法使用。它提出了“一切皆模块的理念”，因此我们可以把所需要的框架、类库、插件甚至是图片、CSS、字体等等都引入。它的引入规范基本符合模块化规范：AMD、CMD、UMD、CommonJS等等。所以即使你之前从未使用过WebPack，但它也可以很好的兼容你之前的项目。
安装
既然要使用，那就必须要安装它,前提是你已经安装了nodejs。
npm i webpack -g
之后，我们就需要在项目文件夹下创建一个文件：webpack.config.js。
这是默认名字,当然我们也可以使用修改的文件名，
基本使用
下面是一段非常简单使用：
var webpack = require('webpack');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 出口文件
path: './build',
publicPath: '/build/',
filename: 'bundle.js' //输出文件
},
module: { // 操作模块
loaders: [ //加载器
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
}
这段配置实现的功能就是将js文件中ES6、JSX的语法编译成es3；
基础配置
1.webpack的配置文件会暴露出一个对象，格式如下：
module.exports = {
//配置项
}
这里使用的就是CommonJS的规范来暴露接口。
2.基本属性
entry:打包的入口文件,通过html中的script标签直接引入。
output:配置打包文件名、路径。
output: { // 出口文件
path: './build',
publicPath: '/build/',
filename: 'bundle.js' //输出文件
}
fileName:定义输出文件名，
path:定义输出文件路径
module:定义对模块的处理逻辑
module: { // 操作模块
loaders: [ //加载器
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
}
loaders:所有引入的模块都是通过这个配置属性来解析
resolve:影响对模块的解析
extensions:识别文件后缀名
plugins:配置插件。
3.loader
-
babel-loader:js语法解析的加载器；需要配合安装
“babel-core”:babel的核心
"babel-preset-es2015":按需下载自己需要的解析器
"babel-preset-react":JSx语法解析 - test属性是使用正则来匹配文件.
- exclude:可以将不需要编译的文件排除在外;
{ test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
-
sass-loader、css-loader、style-loader：
这三个配合使用可以将sass文件编译成css文件并且加载在HTML文件的style标签中。需要注意的是loader加载器是从右到左的顺序加载的。
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}
其中的loader可以缩写成：'style-loader!css-loader!sass-loader'
url-loader:
将图片文件转换成base64引入;大于限制的自动使用file-loader迁入到./images/目录下，文件名后面追加了8位的hash值;
{
test: /.(png|jpg|gif)$/,
loader: 'url-loader?limit=12000&name=./images/[name].[hash:8].[ext]'
}file-loader:配置后可以将引入的字体文件打包到font文件下,;
{
// 匹配字体文件;打包到build文件下
test: /\.(woff|woff2|svg|eot|ttf)$/, //
loader: 'file-loader?name=./fonts/[name].[ext]'
}
注意：这里的相对路径都是在出口文件的目录下生成的。
基本配置文件:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 出口文件
path: path.resolve(__dirname, './build'),
publicPath: '/build/',
filename: 'bundle.js' //输出文件
},
module: { // 操作模块
loaders: [ //加载器
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=12000&name=./images/[name].[hash:8].[ext]'
//将小于12k的图片转换到base64引入;大于的使用file-loader迁入到./build/images/目录下;
},
{
test: /\.html$/, //处理html里的文件资源
loader: 'html-withimg-loader'
},
{
// 匹配字体文件;打包到build文件下
test: /\.(woff|woff2|svg|eot|ttf)$/, //
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
//打包到build文件下
test: /\.php$/, //
loader: 'file-loader?name=./php/[name].[ext]'
}
]
}
}
