Webpack4(一) 入门与体验

Webpack4 入门

WebPack 究竟是什么

WebPack 是新时代的模块打包工具。当项目很大的时候你需要加载很多的 js 文件,一个 js 文件代表一个模块,要是 1000 个的话,依赖关系复杂,项目基本上没法维护了,所以需要一个工具,一方面为了维护依赖关系,一方面为了提升性能。所以 webpack 应运而生

WebPack 安装

必要前提必须是安装 node

• 安装的话 这里选择的是局部安装而不是全局安装(个人不推荐全局安装)

cnpm i webpack-cli -D

cnpm i webpack -D

• 当你安装完以后,要是想使用的话可以借助简单的指令

npx webpack index.js

//index.js是最后汇总的指令

• index.js 里面

import Header from './header.js'
import Siderbar from './slider.js'
import Content from './content.js'

new Header()
new Siderbar()
new Content()

//这里特别需要注意的就是
// import 只适用于 export default xxxx
// require 只适用于 module.exports = xxxx (一般他只试用于方法)

webPack 初探

(1) webPack 项目初始化

• 新建一个文件夹 在终端输入

npm init

这样会在里面生成一个 package.json 文件

里面得代码需要改成下面

{
  "name":"webpack-demo",
  "version":"1.0.0",
  "description":"",
  "private":true,
  "main":"index.js",
  "scripts":{  },
  "author":"YJ",
  "license":"ISC"
}

(2) 安装 webpack

cnpm i webpack-cli -D

cnpm i webpack -D

• 安装完后 要是想测试一下得话可以

npx webpack index.js

//index.js是最后汇总的指令

(3) 新建 webpack.config.js

const path = require('path')
module.exports = {
  entry: './index.js', //看你想打包得文件得路径也可以是 ./src/index.js
  output: {
    filename: 'bundle.js', //输出得名字
    path: path.resolve(__dirname, 'dist'), //输出得路径 __dirname就是当前目录
  },
}

(4) 在 package.json 里面修改

{
  "name":"webpack-demo",
  "version":"1.0.0",
  "description":"",
  "private":true,
  "main":"index.js",
  "scripts":{
    "build":"webpack"  //加一条指令
   },
  "author":"YJ",
  "license":"ISC",
  "dependencies":{
    "webpack":"^4.25.1"
  }
}