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-loadercss-loaderstyle-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 基础配置)