webpack最佳入门实践系列(02)

2.初识打包

2.1 项目初始化

1.创建一个目录，并且切换到目录下面

mkdir webpack-demo && cd webpack-demo

　　

2.npm初始化并本地安装webpack

npm init -y  # 会在本地生成一个package.json的文件
npm install webpack --save-dev    # --save-dev 开发依赖

　　

3.在webpack-demo目录下创建对应的目录和文件

mkdir  src  && cd src   #src 目录 用来存放源文件

touch index.js  # 创建一个入口文件
touch moudel1.js module2.js module3.js  #创建3个模块

　　

4.index.js 文件内容

import module_1 from './module1'
import module_2 from './module2'
import module_3 from './module3'

module_1()
module_2()
module_3()

　　

5.module1.js文件内容

export default function module_1() {
    console.log("这是module_1模块")
}

　　

6.module2.js文件内容

export default function module_2() {
    console.log("这是module_2模块")
}

　　

7.module3.js文件内容

export default function module_3() {
    console.log("这是module_3模块")
}

　　

8.现在，需要返回到项目的根目录，也就是webpack-demo目录下，新建一个配置文件

touch webpack.config.js

　　

9.写入配置内容

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    }
}

　　

10.找到根目录下package.json文件，在script后的对象中，添加内容

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

　　

注意："dev": "webpack"为新增内容

11.最后，需要运行命令打包

npm run dev