webpack4.0学习

wabpack 概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

可以从这里了解更多关于 JavaScript 模块和 webpack 模块的信息。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

下面例子这里可以对照官网学习，下面是我根据官网学习后自己的总结。

起步

传统的html，是使用 script 引入代码依赖，这样会导致全局污染。有没有一种方式可以局部加载，在需要的 js 里，再引入依赖代码。
那么 webpack 解决了我们的问题，使用import、export，来引入我们需要的依赖。webpack 在幕后会将代码“转译”程序中通过 import 引入的依赖，使浏览器可以执行。

使用配置文件

在根目录新建文件webpack.config.js，

const path = require('path');

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

其中 path = require('path');是 nodejs 的库。
1、entry代表入口文件
2、output根据入口文件，webpack 转义后生成的输出文件。filename输出的文件名，path输出文件放在哪个目录下。
下载后运行命令

npm install
npx webpack

例子链接：demo3-使用一个配置文件

NPM 脚本(NPM Scripts)

使用 npm 脚本

npm run build

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

例子链接：demo4-NPM 脚本/

管理资源

webpack 自身只理解 JavaScript本身只理解 JavaScript，如果要处理 css、图片等，需要用 loader。

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

我们需要通过 npm安装一系列的 loader，
css-loader

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

图片 loader，字体 loader

npm install --save-dev file-loader

数据loader

npm install --save-dev csv-loader xml-loader

安装完 loader，在 module 配置中，可以引入这些loader，webpack 会读取配置文件，解析我们 css 文件，图片等。
关于 loader 的一些语法：
test 属性，正则表达式，检测哪些文件需要转换。
use 属性，表示进行转换时，应该使用哪个 loader。

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.(csv|tsv)$/,
                use:[
                    'csv-loader'
                ]
            },
            {
                test:/\.xml$/,
                use:[
                    'xml-loader'
                ]
            }

        ]
    }
}

例子链接：管理资源/demo5

管理输出

上面做的需要手动在 index.html 引入js、css、图片等资源，webpack 可以自动根据配置文件 import，自动引入这些资源到 index.html
我们用 HtmlWebpackPlugin 插件来解决这个问题。
如下就是 webpack 插件的用法，以数组方式呈现。
安装插件

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

webpack.config.js

const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

如果你的项目里dist目录下有 index.html，那么就会覆盖调 index.html，如果没有就会自动生成 dist 文件夹，并生成 index.html

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Output Management</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>

例子链接：管理输出/demo6/

清理 /dist 文件夹

这里用到插件clean-webpack-plugin，使用这个插件后会先清除 dist 文件夹里的所有文件。
可以尝试在dist 文件夹下建立一个空的 index.js,当运行npm run build后，会发现 index.js 不见了，只留下打包的重要的文件。
安装插件

npm install clean-webpack-plugin --save-dev

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

现在执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件！

开发

使用 source map

开发的过程中，webpack 打包源代码后，很难追踪错误代码，这时可以使用source map，使打包后的文件，提示错误出在什么地方，以方便我们调试。
webpack.config.js

 devtool: 'inline-source-map',

例子链接：/开发/demo7-sourcemap/

选择一个开发工具

这里选择开发工具的意思是，不再每次 build 查看代码运行情况，这样太麻烦了，希望看到的结果是修改代码后，可以立即看到效果。
webpack 有三种方式
1、使用观察模式，使用命令webpack --watch
2、插件webpack-dev-server，这种方式最常用。
3、插件webpack-dev-middleware

观察模式webpack --watch
直接修改package.json即可

+     "watch": "webpack --watch",

运行命令npm run watch，修改你的代码，然后刷新浏览器可以看到修改后的结果。

这种很简单，可以直接应用命令，但是每次需要刷新浏览器。下面有更好的方式，使用插件webpack-dev-server或者webpack-dev-middleware自动刷新浏览器
例子链接：开发/demo8-watch/

使用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

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

webpack.config.js

+   devServer: {
+     contentBase: './dist'
+   },

package.json

+     "start": "webpack-dev-server --open",

运行npm start，这时修改代码，每次保存后，可以看到浏览器自动刷新了。
例子链接：开发/demo9_webpack-dev-server/

使用 webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。也就是这里我们需要搭一个服务器，这里用 node 的框架 express，快速搭一个服务器，并在里面运用webpack-dev-middleware，实现自动刷新。
首先，安装 express 和 webpack-dev-middleware：

npm install --save-dev express webpack-dev-middleware

webpack.config.js

     output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
+     publicPath: '/'
    }

publicPath 也会在服务器脚本用到

新建server.js，这个便是服务器代码

package.json

+     "server": "node server.js",

执行 npm run server，打开浏览器，跳转到 http://localhost:3000，可以看到运行的结果。
每次修改代码，浏览器都会自动刷新。
例子链接:开发/demo10_webpack-dev-middleware/

baiqingchun

发布了56 篇原创文章 · 获赞 24 · 访问量 3万+

私信关注

wabpack 概念

起步

使用配置文件

NPM 脚本(NPM Scripts)

管理资源

管理输出

清理 /dist 文件夹

开发

使用 source map

选择一个开发工具

使用 webpack-dev-server

使用 webpack-dev-middleware

猜你喜欢