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

1.webpack简介

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源

1.1.webpack安装

在安装webpack之前你需要先安装Node.js，最理想的Node.js版本是长期支持版本(LTS - Long Term Support)

查看Node.js版本

node -v　

1.1.1.全局安装

npm install -g webpack

查看版本

webpack -v

1.1.2.本地安装

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。 首先你需要进入到你的项目目录，然后运行下面的命令

npm install webpack --save-dev

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