入门webpack

2023年4月14日 290次阅读 来源: 阳光号

step 1 创建项目目录结构

vue-todo
├─dist
└─src
    │  entry.js : 入口文件。负责引入（将被webpack处理的）页面的所有资源（js/图片/css）。
    │  index.html
    │  
    ├─css
    ├─images
    └─js

step 2 初始化环境

使用命令行工具在项目根目录（此处为vue-todo）下输入npm init -y并回车，初始化npm环境。
npm使用前置条件

初始化webpack环境
npm i wepack webpack-cli

初始化vue环境
npm i vue vue-loader
结束后在命令行工具后应该展示如下信息：

√ Installed 2 packages
√ Linked 26 latest versions
√ Run 0 scripts
peerDependencies WARNING vue-loader@* requires a peer of css-loader@* but none was installed
√ All packages installed (26 packages installed from npm registry, used 3s(network 3s), speed 1.1MB/s, json 28(127.23kB), tarball 3.22MB)

其中有一个warnning，它的意思是vue-loader需要css-loader的支持，但css-loader我们还没有安装。

所以安装css-loader
npm i css-loader

step 3 为使用Webpack做准备

在项目根目录下新建webpack.config.js文件，这个文件是用来配置webpack的运行参数的。
为文件添加如下内容：

const path = require('path'); //路径管理模块,使用它可以高效获取项目路径,避免路径错误.

/**
 * 在这个对象中配置webpack的运行参数
 */
var config = {
    //指定集成引入资源的入口js文件
    entry: path.join(__dirname,"./src/entry.js"),
    //webpack处理后输出的文件的配置
    output:{
        path: path.join(__dirname,"./dist"),//指定输出的目录
        filename: 'bundle.js',//输出的文件的文件名
    }
}

/**
 * 向外暴露配置webpack的对象
 */
module.exports = config;

之后再打开package.json，找到该json中’scripts’属性，在未修改前应该如下所示：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },

为其添加webpack相关配置后应该多出如下所示的一行(build)：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },

之后在命令行工具中，在项目根目录下运行npm rum build，应该得到类似如下的成功信息：

> webpack --config webpack.config.js

Hash: a5b152d4afb92392b2f6
Version: webpack 4.39.1
Time: 419ms
Built at: 2019-08-10 11:38:12 PM
    Asset       Size  Chunks             Chunk Names
bundle.js  930 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/entry.js 0 bytes {0} [built]
    原文作者：阳光号
    原文地址: https://segmentfault.com/a/1190000020032873
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞