Webpack知识体系 | 青训营

99588XC
44 阅读2分钟

什么是Webpack

  • 本质上是一种前端资源编译、打包工具
  • 中多份资源文件打包成一个Bundle
  • 支持Babel、Eslint、 TS、CoffeScript、Less Sass
  • 支持模块化处理css、图片等资源文件
  • 支持HMR +开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking
  • 支持Sourcemap

使用Webpack

Webpack是一个非常流行的JavaScript打包工具，用于将多个文件打包成一个或多个输出文件，并提供了许多有用的功能，如代码压缩、文件合并、热更新等。

  • 安装

    npm i -D webpack webpack-cli

  • 编辑配置文件

    module.exports = {
    entry: 'main.js',
    output: {
        filenane: "[name].js" ，
        path: path.join(dirname, "./dist"),
    },
    module: {
        rules:[{
            test: '/.lesss/i',
            use: [ 'style- loader'，' css-Loader', ' less-loader' ]
        }]
    }
}

  • 执行编译命令

    npx webpack

核心流程——极度简化版

  • 入口处理
  • 依赖解析
  • 资源解析
  • 资源合并打包

模块化 + 一致性

  • 多个文件资源合并成一个，减少http 请求数
  • 支持模块化开发
  • 支持高级JS特性
  • 支持Typescript、CoffeeScript方言
  • 统一图片、CSS、字体等其它资源的处理模型
  • Etc...

使用Webpack

关于Webpack的使用方法，基本都围绕配置"

展开，而这些配置大致可划分为两类:

  • 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项

    • 输入:

      • 'entry'
      • 'context'

    • 模块解析:

      • 'resolve'
      • 'externals'

    • 模块转译:

      • 'module'

    • 后处理:

      • 'optimization'
      • 'mode'
      • 'target’

  • 工具类:主流程之外，提供更多工程化能力的配置项

问题:

  • Loader有什么作用?为什么这里需要用到css-loader、style-loader
  • 与旧时代——在HTML文件中维护css相比，这种方式会有什么优劣处?
  • 有没有接触过Less、Sass、Stylus 这一类CSS预编译框架?如何在Webpack接入这些工具?

创建一个Webpack配置文件

在项目根目录下创建一个名为webpack.config.js的文件，用于配置Webpack的输入、输出、插件等参数。例如：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    })
  ]
};

其中，entry指定输入文件，output指定输出文件路径和文件名，plugins指定要使用的插件。

编写代码

在src目录下编写代码，例如：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
​
const App = () => {
  return <div>Hello, world!</div>;
};
​
ReactDOM.render(<App />, document.getElementById('root'));

运行Webpack

在终端中输入以下命令运行Webpack：

npx webpack

这将编译代码并生成一个名为bundle.js的输出文件

使用生成的输出文件

在HTML文件中引入生成的bundle.js文件即可使用Webpack打包的代码：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <script type="module" src="dist/bundle.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>
avatar
文章
阅读
粉丝