项目实战：webpack的搭建

最新推荐文章于 2023-05-06 03:46:15 发布

原创最新推荐文章于 2023-05-06 03:46:15 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #react #es6

本文介绍了 Webpack 的基本配置方法，包括入口(entry)、出口(output)、加载器(loader)及插件(plugin)等内容。详细解释了如何使用 Babel 和加载器处理不同类型的资源文件如 CSS、LESS 和图片。

webpack是一个模块的打包工具，这里有他的官方文档，

打包工具需要的条件：一个输入的文件和输出文件，

webpack的组成主要是四元素;entry.output,loader,plugin;
entry就是输入文件；
output就是输出文件；
loader是用于加载某些资源文件，由于webpack本身只会打包conmmon.js的文件，所以对于其他资源例如css,image,或者其他的语法是没法加载打包，这就需要对应的loader将资源转化，加载进来。loader是作用于一个个文件上的；

plugin是扩展webpack的功能。他直接作用于webpack上，扩展他的功能，当然loader也有变相的扩展webpack的功能，但是plugin能更加丰富，而不仅局限于资源的加载。
而搭建一个基础的webpack让其能运行起来只要一个entry和output即可

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry:'./app/index.js',
    output:{
        path: path.resolve(__dirname, './dist'),
        filename:'bundle.js'
    },
  }

webpack 自身只能打包common.js的文件，但一个项目需要各种的文件例如（less,jsx，img,png，es6等），所以就需要一个插件来把这写文件转为js文件，就有了babel转码器， babel:

babel-core

babel-polyfill

babel-runtime

babel-plugin-transform-runtime

babel-loader

babel-preset-es2015

babel-preset-react
配置如下：

{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
}

配置了babel转码器就要加一个.babelrc文件，格式如下：

{
  "presets": [],
  "plugins": []
}
添加文件后如下
{
  "presets": [
      "es2015", 
      "react",
      "stage-2"
  ],
  "plugins": ["transform-runtime"]
}

图片的加载器：url-loaderfile-loader配置项如下

{
    test:/\.(png|jpg)$/,
    loader:'url-loader?limit=1000',
}

（limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于1000字节的图片正常打包，小于1000字节的图片以 base64 的方式引用）

样式处理(css)这里介绍less文件,需要用到less,less-loader,style-loader,css-loader,这几个加载器，配置如下：

{
    test:/\.less$/,
    use: [{
            loader: "style-loader" 
            }, {
                loader: "css-loader" 
            }, {
                loader: "less-loader" 
          }]
 }

如此几个简单的配置即可
若是项目中药引入ant-design的库就需要再babel-loader下添加如下配置：

query:{
         plugins: [
         ["import", 
            [{ 
                "libraryName": "antd",
                "style": true 
            }]
         ]
      ]
  }

如此一配置，一个常规的配置就可