webpack 基础配置

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]'
            }
        ]
    }
}

webpack 基础配置

安装

基本使用

基础配置

推荐阅读更多精彩内容