webpack入门

时间  2020-01-22
标签 webpack 入门 繁體版
原文   原文链接

前言

本篇是我通过一周多的时间阅读博客及官方文档所写的文章，算是本身对webpack学习的总结。有篇我的认为很是不错的webpack文章贴在最下面的参考连接的第一条。本篇介绍的是用webpack本身搭一个react应用javascript

1、概念

  • 入口(entry)
    入口起点(entry point)指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
  • 输出(output)
    output 属性告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件。
  • loader
    loader 让 webpack 可以去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能够将全部类型的文件转换为 webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能力，对它们进行处理。
  • 插件(plugins)
    用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。

准备

`npm init` 自动帮你建立package.json文件

`npm install --save-dev webpack // 安装Webpack`

新建文件夹app、public文件分别用于存放源文件及打包后的存放文件。在app文件夹中建立index.js与index.html文件。再建立一个webpack的配置文件webpack.config.js。使用前记得安装下webpack `npm install webpack -g`，固然你也能够不全局安装。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <script src="../public/bundle.js"></script>
</body>
</html>

1.入口

const config = {
  entry: './app/index.js'
};
module.exports = config;

entry就是指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。本项目中的入口文件就是app文件夹中的index.js文件。(多入口及更多选项参考官方文档)css

2.出口

var config = {
    entry: "./app/index.js", // 入口文件
    output:{
        filename:"bundle.js",   //filename 用于输出文件的文件名。
        path:path.resolve(__dirname, './public'),   //目标输出目录 path 的绝对路径。__dirname
        publicPath:path.resolve(__dirname, './public') //publicPath取决于你的网站根目录的位置，由于打包的文件都在网站根目录了，这些文件的引用都是基于该目录的。假设网站根目录为public，引用的图片路径是’./img.png’，若是publicPath为’/’，图片显示不了，由于图片都打包放在了dist中，那么你就要把publicPath设置为”/dist”
    }
}

module.exports = config;

填好入口与出口配置后、在命令行中输入.node_modules/.bin/webpack --config webpack.config.js 若是你是全局安装webpack的话可直接输入webpack --config webpack.config.js,直接输入webpack也能够，他会识别当前目录中的webpack.config.js。而后你就能够再public文件夹中看到名为bundle.js文件生成了。html

3.更快捷的执行打包任务

若是你不想每次在命令行中输入那么长的代码,那就在package.json中的scripts字段中配置以下前端

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

无论你是否全局安装的webpack在scripts中他会自动识别node_modules中的webpack，因此不须要在里面输入./node_modules...。如今你能够再命令行中输入npm run build进行打包了。java

4.webpack-dev-server

webpack-dev-server 是一个小型的Node.js Express服务器,webpack-dev-server默认会以当前目录为基本目录,除非你制定它.经过webpack-dev-server就可实现热加载了。使用前须要用npm安装npm install webpack-dev-server --save-dev，它根据webpack.config.js文件中的选项构建。常见的选项以下：node

webpack-dev-server选项 选项说明
content-Base 默认状况下，webpack-dev-server会从项目的根目录提供文件，能够经过此选项设置文件的目录名
port 服务器使用的端口，默认状况下为8080
inline 设为true时能够在文件发生变化时，更新页面
colors 设置终端输出字体颜色
historyApiFallback 当设置为true时，访问全部服务器上不存在的文件，都会被重定向到/，也就是index.html文件

代码以下：react

var config = {
    entry: "./app/index.js", // 入口文件
    output: {
        filename: "bundle.js",   //filename 用于输出文件的文件名。
        path: path.resolve(__dirname, './public')   //目标输出目录 path 的绝对路径。__dirname
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新（为何这个我不加都能热更新？？？）
        port: 8888, // 想webpack-dev-server在端口8888启动
    }
}

webpack-dev-server默认会以当前目录为基本目录,由于我指定到了public，因此在public中新建个index.html，并在html中引入当前文件夹中的bundle.js。webpack

在package.json 添加以下代码就可快捷启动：web

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

而后再命令行中输入npm run server启动webpack-dev-server。并在浏览器打开http://localhost:8888/就能够查看了。修改了index.js中的代码，也会实时刷新了。正则表达式

5 babel

loader 用于对模块的源代码进行转换。loader 可使你在 import 或"加载"模块时预处理文件。所以，loader 相似于其余构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 能够将文件从不一样的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至容许你直接在 JavaScript 模块中 import CSS文件！

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

  • test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
  • loader：loader的名称（必须）
  • include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不须要处理的文件（文件夹）（可选）；
  • query：为loaders提供额外的设置选项（可选）

css

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

npm install --save-dev style-loader css-loader //安装
配置以下：

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

能够认为他是从后面开始往前面解析 css-loader ==> style-loader，因此若是是less文件除了安装less-loader以外配置文件应该写在css-loader后面，以下：

test: /\.less$/,
use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'less-loader' }
    ]
这样咱们平时最基本的最简单的配置大体完成了

6.babel

Babel 是一个 JavaScript 编译器，把用最新标准编写的 JavaScript 代码向下编译成能够在今天随处可用的版本。 这一过程叫作“源码到源码”编译， 也被称为转换编译。其中核心的功能能够在babel-core模块中得到。其余的部分根据用户的需求来下载：若是想与webpack一块儿使用，须要安装babel-loader模块；若是想使用ES6特性，须要安装babel-preset-env；若是想使用React JSX，那么须要安装babel-preset-react。固然还有一些其余的配置模块，这里并无所有列出。接下来咱们看一个简单的React例子:

安装babel相关的： npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
安装react相关的： npm install react -react-dom --save

webpack.config.js中加入以下代码：

{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                "env", "react"
            ]
        }
    },
    exclude: /node_modules/
}

就能实现简易的react应用了。到目前为止public中的index.html文件都是本身写在public文件夹中的，引入js文件都是本身手动的，因此再来介绍下插件

7.plugin

loader 被用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。

HtmlWebpackPlugin这个插件的做用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不一样时很是有用（好比添加了hash值）。在编译过程当中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件

安装 npm install --save-dev html-webpack-plugin

webpack.config.js顶部引入var HtmlWebpackPlugin = require('html-webpack-plugin');
在config中的plugins字段中添加以下代码：

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname , './app/index.html') // 引用app文件夹中的index.html做为模板
        })
    ]

index.html模板以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

在终端中输入npm run build,接下来你将会在public文件夹中看到自动生成的index.html文件了。

模块热替换(Hot Module Replacement)
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程当中替换、添加或删除模块，而无需从新加载整个页面。主要是经过如下几种方式，来显著加快开发速度：

  • 保留在彻底从新加载页面时丢失的应用程序状态。
  • 只更新变动内容，以节省宝贵的开发时间。
  • 调整样式更加快速 - 几乎至关于在浏览器调试器中更改样式。

以前的刷新是页面全局刷新，若是咱们只想局部刷新即只刷新修改的部分，须要使用webpack的HotModuleReplacementPlugin插件，在devServer中添加hot:true参数，在webpack.config.js的plugins中添加下面的信息:

new webpack.HotModuleReplacementPlugin()

参考连接

入门 Webpack，看这篇就够了
博客园xfshen的webpack
webpack中文文档

在下的文章都是学习过程当中的总结，若是发现错误，欢迎留言指出~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程