webpack4系列笔记之（1）

一、webpack 是什么？

webpack 是前端自动化构建工具，可以用来打包诸如：js,html,css,png,jpg,gif,json等文件，是前端工程化项目的必备技能;

备注：本文node版本10.13.0 ，webpack版本4.26.0 webpack-cli版本3.1.2

二、首先初始化一个项目

npm init -y

初始化项目后会产生一个package.json文件，内容如下:

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

三、webpack的安装及使用

1、全局安装：

npm i webpack webpack-cli -g

2、局部安装：

npm i webpack webpack-cli -D  

3、安装指定版本

npm info webpack  // 查看webapck 版本信息
npm i webpack@4.26.0 webpack-cli@3.1.2 -D  // 安装指定版本

安置成功后的package.json

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

4、执行打包

webpack的默认配置文件webpack.config.js

npx webpack  index.js  // 默认webpack.config.js 配置文件打包
npx webpack --config myconfig.js   // 指定配置配置文件打包

myconfig.js配置内容：

var path = require('path');

module.exports = {
  // 入口文件
  entry:'./index.js',  
  output:{
    // 输出的文件名
    filename:'built.js',
    // 输出的文件路径
    path:path.resolve(__dirname,'dist')
  }
}

5、配置打包命令

使用默认配置文件名：webpack.config.js 内容和上文myconfig.js 内容一致；
package.json文件：

"scripts": {
    "build": "webpack"
  },

终端执行：

npm run build  // 执行打包

webpack系列笔记会持续更新，敬请关注