登录
    hello,it's me!

webpack打包入门

人丑多读书 破玉 47次浏览 0个评论

什么是webpack

  webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
  Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

webpack的安装

  Webpack可以使用npm安装,新建一个文件夹(此处命名为npmpack),在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

使用webpack

使用前的准备

  使用 webpack之前先要用npm初始化打包文件 package.json。这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

  package.json文件已经就绪,我们在本项目中安装webpack作为依赖包

npm install --save-dev webpack

  回到之前的文件夹,并在里面创建两个文件夹,src文件夹和public文件夹,src文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:

  • index.html –放在public文件夹中;
  • MagicComponent.js– 放在src文件夹中;
  • main.js– 放在src文件夹中;

  • 我们在index.html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包后的js文件命名为bundle.js,之后我们还会详细讲述)。

    // MagicComponent.js
    module.exports = function() {
      var greet = document.createElement('div');
      greet.textContent = "Hi there and greetings!";
      return greet;
    };
    
    /main.js 
    const greeter = require('./MagicComponent.js');
    document.querySelector("#root").appendChild(greeter());
    

      npm可以引导任务执行,对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可,设置方法如下。

    {
      "name": "webpack-sample-project",
      "version": "1.0.0",
      "description": "Sample webpack project",
      "scripts": {
        "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除
      },
      "author": "magic",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.30.0"
      }
    }
    

      webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖

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

    通过配置文件来使用Webpack

      在当前文件夹的根目录下新建一个名为webpack.config.js的文件,我们在其中写入如下所示的简单配置代码,目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

    module.exports = {
        entry: __dirname + "/src/main.js",
        output: {
            path: __dirname + "/public",
            filename: "bundle.js"
        },
        mode: 'development',
        devtool: 'eval-source-map',
        devServer: {
            contentBase: "./public",
            historyApiFallback: true,
            inline: true
        }
    }
    

    在终端中输入npm run server即可在本地的8080端口查看结果

    对于loader和插件(plugins) 两个概念我们下次再学习。
    参考文章:
    入门 Webpack,看这篇就够了
    Webpack官方文档


    华裳绕指柔, 版权所有丨如未注明 , 均为原创|转载请注明webpack打包入门
    喜欢 (0)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    返回顶部