写一个自己的webpack项目

Posted 2020-10-23 ccclarity

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了写一个自己的webpack项目相关的知识，希望对你有一定的参考价值。

1. 安装：

为了更好的理解npm，我们运行下面两行命令：

npm config set loglevel http  // 让我们知道运行的每一个npm命令
npm config set progress false   // 关闭那个进度条

为了使安装的速度更快，我们使用淘宝的镜像：

npm config set registry https://registry.npm.taobao.org/

这个配置会在我们设置npm adduser的时候出现问题，使用 npm config delete registry 恢复原样。

然后我们开始安装webpack，npm i -g webpack ，如果报错说有权限问题，换成 sudo npm i -g webpack，windows用户没有sudo，使用管理员身份运行git bash ，再运行安装命令。

检测我们是否安装成功：webpack --help。当出现各种参数的解释时，说明安装成功。

2. 参照webpack的官网指南，我们试着做一个。

首先，新建一个文件夹： mkdir webpack-demo 并进入 cd webpack-demo

然后创建一个package.json文件：npm init -y

安装npm install --save-dev webpack

接着，按照官网上的文件结构，创建各种文件：

技术分享图片

i. 在app/index.js这样写：

function component(){
    var element = document.createElement(‘div‘);
    element.innerhtml = _.join([‘Hello‘,‘Webpack‘],‘‘)　　　　// _ 是引入的lodash的暴露的全局变量
    return element;
}

document.body.appendChild(component());

ii. index.html这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/[email protected]"></script>　　　　// 引入lodash
    <title>Getting Start</title>
</head>
<body>
    <script src="./app/index.js"></script>
</body>
</html>

这是最古老的引入一个JS文件的方法，接下来我们使用高级一点的写法。

i. 在webpack-demo的目录下，安装lodash，npm install --save lodash。这时发现会出现一个新的文件夹node-modules，lodash就在这个文件夹下。

ii. 然后把index.html中引入lodash的src删掉，在app/index.js里面加上一行引入，import _ from ‘lodash‘ ;（import的语法）

iii. 把index.html中的

<script src="./app/index.js"></script> 换成

<script src="./dist/bundle.js"></script>

iv. 在webpack-demo下执行命令：webpack app/index.js dist/bundle.js（方方的教程里说执行这个./node_modules/.bin/webpack app/index.js dist/bundle.js 命令，但是我的不好用）

v. 然后在浏览器中打开这个index.html，页面上显示出了 Hello Webpack就成功啦。

3. 优化：

每次预览效果都要执行 webpack app/index.js dist/bundle.js，很烦，优化的办法，在根目录webpack-demo下，新建并编辑webpack.config.js（web pack的配置文件），写入：

var path = require(‘path‘);

module.exports = {
  entry: ‘./app/index.js‘,
  output: {
    filename: ‘bundle.js‘,
    path: path.resolve(__dirname, ‘dist‘)
  }
};