手写webpack

1. 创建一个文件夹 这个文件夹 用来使用 webpack 的 

•          npm  init - y  初始化文件

•          引入   webpack webapck-cli     

                      如： yarn  add  webpack webapck-cli -D

•         新建src目录 mkdir src

                   

                   创建 index.js  a.js  b.js

                   index.js  引用 a.js  a.js  引用 b.js

 

                   index.js

                  

        

let str = require('./a.js')
console.log(str)

 

 

                  a.js

let b = require('./base/b.js')
module.exports = b + '2020'

 

           

               b.js

module.exports = '您好'

 

 

•    创建 webpack.config.js 进行配置

            

let path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}
 

 

• 运行项目   命令行运行 npm webpack  运行成功入下

 

 

2..创建属于我们自己的webpack 命令

  

•    创建目录

             mkdir  my-pack

•    初始化

            npm  init -y

•   在项目跟目录下 创建 bin 文件夹 bin 文件夹下创建  my-pack.js
•  添加运行环境为  node

            
#! /usr/bin/env node
console.log('2020')

•    在node  里面想配置面向工具  可以在 package.json 添加bin  属性

{
  "name": "my-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bin": {
    "my-pack": "./bin/my-pack.js"
  }
}

3. 将创建的包  链接到 全局上 在我们需要的项目使用 这个打包工具

•      进去到创建的npx 命令的目录 下  cd  my-webpack
•      执行link     link 

•      进去到使用目录  cd webpack-dev
•     把刚才npm link到全局的命令npx m-pick 再link到本地中使用

           

npm  link m-pack

 

        

演示：

 

 链接  :https://app.yinxiang.com/fx/48d668d2-ec17-4087-a41b-51dc9dc1ea63

 

代码演示：

https://gitee.com/guangzhou110/handwritten_webback