webpack的基本概念及简单打包一个项目

2,054 阅读2分钟

了解概念

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

42ac10719d0ab597d94b9b0389cb399.png

入口 entry

指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。

webpack 会找出入口起点所依赖的模块和库

每个依赖项随即被处理,最后输出到称之为 bundles的文件中

可以通过在webpack.config.js中配置 entry 属性,来指定一个入口起点,也可以是多个,默认值为 ./src

module.exports = {
  entry: './main.js'
};

出口 output

告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist

// path 模块是一个 Node.js 核心模块,用于操作文件路径
const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist'),//创建一个dist文件夹(由于默认为dist可不写)
    filename: 'bundle.js'//dist文件夹里是该文件
  }
};

loader

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。然后让webpack对其进行打包。(因为webpack 自身只理解 JavaScript,所有大部分时候需要用到这个)

  1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性,表示进行转换时,应该使用哪个 loader
const path = require('path');
module.exports = {
  //...
  //表示如果require或import语句中被解析为 .txt路径
  //webpack编译器就会在打包之前用raw-loader转换
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

插件 plugins

插件的作用范围:从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

插件需要通过 require() 加载,接着将它添加到 plugins 数组中。多数插件可以通过选项option自定义

如果在一个配置文件中因为不同目的而多次使用同一个插件,需要通过使用 new 操作符来创建它的一个实例

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

模式

通过选择 developmentproduction 之中的一个,来设置 mode 参数,就可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

实现简单打包

1、安装node.js

在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

安装完成后打开命令行执行node-v,如果出现版本号说明安装成功

2、初始化项目

新建一个工程目录,并进入该目录进行初始化

npm init

之后根据提示按回车即可,你会发现目录会生成一个package.json文件,它相当于npm项目的说明书,记录了项目名称、版本、仓库信息等信息。

a0f1ee35ac7544899300620fe636ebe.png

3、安装webpack

本项目用的是全局安装

  • 本地安装:添加其成为该项目中的依赖,只能在项目内使用

    //安装最新版本
    npm install webpack --save-dev
    //安装指定版本
    npm install --save-dev webpack@<version>
    

    如果你使用 webpack 4+ 版本,你还需要安装 CLI,webpack-cli则是命令行工具

    npm install --save-dev webpack-cli
    

    对于大多数项目,建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。

    package.json指定打包的配置文件,这时候可以运行代码npm run build进行打包(如果不配置,后面打包的时候只需要运行webpack):

"scripts": {
   "build": "webpack --config webpack.config.js"
}
  • 全局安装:npm会帮我们绑定一个命令行环境,一次安装处处运行

    npm install –g webpack webpack-cli 
    

    不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败

4、添加文件

  • webpack.config.js:webpack配置文件

    const path = require('path');
    const config={
        //入口
        entry: './main.js',
        //出口
        output: {
        	filename: 'bundle.js'
        },
    	mode: 'development'	
    }
    module.exports = config;
    
  • content.js:给入口文件添加内容

    export default function(){
        document.write("Hello world!")
    }
    
  • main.js:入口文件

    import Content from './content.js'
    document.write('My first webpack app.<br/>')
    Content()
    
  • index.html:展示页

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My first webpack app</title>
    </head>
    <body>
        <script src="./dist/bundle.js"></script>
    </body>
    </html>
    

5、命令行打包

$ npm run build

image.png

这样就表示打包成功啦,

现在打开index.html就能看到内容了

如果你想验证,可以在content.js上修改文字,接着再进行打包你会发现内容也会跟着更新