webpack使用初体验

最新推荐文章于 2022-05-21 15:06:45 发布

L凯

最新推荐文章于 2022-05-21 15:06:45 发布

阅读量291

点赞数

分类专栏： webpack 文章标签： webpack js

本文链接：https://blog.csdn.net/weixin_37697277/article/details/79443850

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一，什么是webpack?

简单来说，webpack就是一个模块打包工具，它可以分析项目结构，并找到js模块，将我们的项目文件压缩打包。

二，webpack如何使用

使用 webpack打包我们的项目文件，首先得有我们的项目文件，那么下面建立相关的文件。

1，创建app.js文件，这个文件就是项目加载文件，作为入口文件。当然模块开发，需要建立几个模块文件。

2，创建模块文件并导出：

export default function a(){ //导出
    console.log("module a");
}

3，将项目需要的其他模块导入app.js文件

import a from './a'; //es6语法导入
import b from './b';
import c from './c';

a();
b();
c();

4，创建HTML文件，并引入app.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

在浏览器中html运行并不能达到我们想要效果，因为在以上文件中使用了ES6语法，现在的浏览器并不能识别。因此需要webpack去帮我们解决这个问题。

5，创建配置webpack.config.js文件

创建一个对象，该对象包含打包项目必须要有的两个属性

entry：表示入口，引入前面建立的app.js文件，通过他可以找到要打包的文件。

output：打包后的文件放在哪里，它接收的是文件的绝对路径。

const path = require('path'); //引入path,自动获取打包后文件存放的路径 //注意，实际json文件中这样注释是不对的，不能有注释
module.exports = {
    entry:'./src/app.js', 
    output: {
        path: path.resolve(__dirname ,'dist'), //dist为存放目录名
        filename: 'main.js' //打包后文件名
    }

};

创建目录名为dist文件夹，生成的打包文件将会存放这里。

由于webpack是基于node.js的，所以先npm 初始化，安装webpack的依赖，创建package.json文件

npm init -y

6，安装webpack

npm install -D webpack@3.5.5 ;

（@符表示安装哪个版本，不写默认最新版本）

7，在package文件中配置启动命令

{
  "name": "p",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"  //
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.5"
  }
}

8，到此步就可以启动webpack打包项目文件了，输入以下命令打包。