webpack基础配置

Posted 2020-12-26 Samve

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack基础配置相关的知识，希望对你有一定的参考价值。

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的javascript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;

类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；

Scss，less等CSS预处理器

...

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

首先看下webpack最基本的应用：全局使用

1、全局安装webpack：

cnpm install webpack -g

2、创建项目：

mkdir app

在 app 目录下添加 runoob1.js 文件，代码如下：

document.write("It works.");

在 app 目录下添加 index.html 文件，代码如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

接下来我们使用 webpack 命令来打包：

webpack runoob1.js bundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

在浏览器中打开 index.html，输出结果如下：

技术分享图片 ?

webpack的使用，最复杂的一部分是莫过于它的配置项。webpack通过你的配置项，放置所有与打包相关的信息。一个基本的配置包括：

module.exports = {
        entry: ‘‘,
        output: {},
        module: {
            rules: []
        },
        plugins: [],
};

你如果要打包一个文件，那首先要指定文件的地址，也就是entry；打包之后放在那里呢，也就是output；打包过程中文件要经过怎么样的处理，也就是rules中的loader；如何能够使webpack打包更快，体积更小呢，也就是plugins。这些配置相辅相成，紧密结合。

webpack版本不同，使用方式可能也会不同，下面来看下webpack4的使用：

一、webpack3的使用：

1、首先，创建一个目录，比如demo，使用npm初始化目录：

npm init

执行后会有一系列选项，可以按回车键快速确认，完成后会在demo目录生成一个package.json的文件。

2、之后在本机局部安装webpack：

npm install webpack --save-dev

--save-dev会做为开发依赖来安装webpack。安装成功后，在package.json中会多了一项配置：

"devDependencies" : {

"webpack": "^3.6.0",

}

此时的package.json文件为：

{
  "name": "wb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
	"dev": "webpack-dev-server --open --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0",
  }
}

看到"devDependencies"中含有webpack，就说明已经安装成功了，很快就可以启动一个webpack工程。

二、webpack4的使用：

1、首先，创建一个目录，比如demo，使用npm初始化目录：

npm init

执行后会有一系列选项，可以按回车键快速确认，完成后会在demo目录生成一个package.json的文件。

2、之后在本机局部安装webpack：

npm install webpack --save-dev

--save-dev会做为开发依赖来安装webpack。安装成功后，在package.json中会多了一项配置：

"devDependencies" : {

 "webpack": "^4.16.3",

}

此外还需安装webpack-cli：

npm install webpack-cli --save-dev

3、配置webpack：

创建 webpack.config.js 文件作为webpack的配置文件。

var path = require(‘path‘);

var config = {
    entry: {
        main: ‘./main‘//配置的单入口，webpack会从main.js开始工作
    },
    output: {
        path: path.join(__dirname, ‘./dist‘),//存放打包后文件的输出目录
        publicPath: ‘/dist/‘,//指定资源文件的引用目录，
        filename: ‘bundle.js‘//指定输出文件的名称，只要在html中引用它即可

    }
};

module.exports = config;

新建index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id=‘root‘></div>
<script type="text/javascript" src="./dist/bundle.js" charset="utf-8"></script>
</body>
</html>

新建main.js文件：

document.write("test webpack4.0");

现在工程目录结构为：

技术分享图片 ?

4、使用webpack：

设置开发或者生产模式：

在 webpack.config.js 里设置

mode: ‘development‘

为了方便使用，我们在package.json里加入webpack打包的命令方便我们使用修改script项：

"scripts": {
    "build": "npx webpack --config webpack.config.js"
 },

这样再次运行我们直接输入：

npm run build

就可以了。

二、webpack.config.js：

归根结底，webpack就是一个.js配置文件，我们建立一个webpack.config.js文件，我们可以在其中进行各项配置。

比如我们想要使用一个热加载网页的框架webpack-dev-server，我们先安装：

npm install webpack-dev-server --save-dev

然后在package.json的"scripts"里增加一个快速启动webpack-dev-server服务的脚本：

  "scripts": {
	"dev": "webpack-dev-server --open --config webpack.config.js"
  },

在webpack.config.js中对webpack.config.js中添加devServer选项对webpack-dev-server进行详细配置：

    devServer:{
        port: 3000,
        publicPath: "./"
    }

当运行：

npm run dev

命令时，就会执行

webpack-dev-server --open --config webpack.config.js

其中--config是指向webpac-dev-server读取的配置文件路径，这里直接读取我们在上一步创建的webpack.config.js文件。

--open会在执行命令时自动在浏览器中打开页面，默认地址是127.0.0.1:8080，不过ip和端口都是可以配的：

webpack配置中最重要的也是必选的两项是入口和出口，入口的作用是告诉webpack从哪里开始寻找依赖，并且编译。出口则用来配置编译后的文件存储位置和文件名。

在终端执行

npm run dev

就会自动在浏览器中打开页面了。

三、完善配置文件：

在webpack的世界里，每一个文件都是一个模块，比如.css，.js，.html，.jpg，.less等。对于不同的模块，需要用不同的加载器来处理，而加载器就是webpack最重要的功能。通过安装不同的加载器可以对各种不同后缀名的文件进行处理，比如现在要写一个css样式，就要用到css-loader和style-loader。用npm方式安装它：

npm install css-loader --save-dev
npm install style-loader --save-dev

安装完成后，在webpack.config.js文件里配置Loader，增加对.css文件的处理：

  module: {
    rules: [
      {
        test: /.css$/,
        use: [
                ‘style-loader‘,
                ‘css-loader‘
            ]
      }
    ]
  }

webpack看似复杂，但它不过是一个js配置文件，只要搞清楚入口、出口、加载器、插件这四个概念，使用起来就不那么困惑了。

四、Loaders

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）

loader：loader的名称（必须）

include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）

下面以css的处理为例来说明：

现在写一些css，就需要用到style-loader和css-loader,现在通过npm来安装：

npm install style-loader css-loader --save-dev

安装完成后，建立一个css文件，并在main.js文件中增加如下代码（webpack.config.js里不用配置，注意style-loader和css-loader的顺序）：

require(‘!style-loader!css-loader!./style.css‘)

重新执行：

npm run build

或者在webpack.config.js文件中增加如下配置：

    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    ‘style-loader‘,
                    ‘css-loader‘
                ]
            }
        ]
    }

然后在main.js文件中增加如下代码：

require(‘./style.css‘)

重新执行：

npm run build

五、Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；

让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

我们先来一次性安装这些依赖包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下:

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: ‘eval-source-map‘,
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(.jsx|.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。

Babel的配置

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: ‘eval-source-map‘,
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(.jsx|.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }
};
//.babelrc
{
  "presets": ["react", "env"]
}

六、手动通过终端方式，将第三方库直接打包：

以jquery为例：

在对应的文件夹下安装jquery：

npm install jquery --save-dev

在main.js中导入jquery：

var $ = require(‘jquery‘);

导入后就可以开始使用了：

// main.js
require(‘./style.css‘)
var $ = require(‘jquery‘);
document.write(‘<div>Hello World</div>‘);
$("div").html("导入jquery实例！");

七、一切皆模块

Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。

CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

//安装
npm install --save-dev style-loader css-loader

八、插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

使用插件的方法

要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）

以上是关于webpack基础配置的主要内容，如果未能解决你的问题，请参考以下文章

webpack基础配置

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli脚手架中webpack配置基础文件详解

webpack的一些基础