初识webpack（webpack的安装及使用）准备安装nodewebpack是基于nodejs开发的模块打包工具，所以

准备

安装node

webpack是基于nodejs开发的模块打包工具，所以要先安装nodejs 进入nodejs官网找个最新版本进行安装即可

查看node是否安装

打开控制台输入node -v 即可查看安装的node的版本输入npm -v 可以查看到npm版本号

初始化项目

项目执行npm init进行初始化，使项目符合node规范

安装webpack

安装webpack到全局

npm i webpack -g
npm uninstall webpack-g // 全局卸载webpack

安装webpack到本项目

安装模块并且保存到package.json的devDependencides

npm insatll --save-dev
npm i -D // 上面命令的简写

安装最新的稳定版本
```
npm i -D webpack
```
安装指定版本
```
npm i -D webpack@<version>
```
安装最新的体验版本
```
npm i -D webpack@beta
```

更推荐安装到本项目的方式，防止不同项目因版本不同而导致的冲突

使用webpack

正确执行webpack命令

首先要安装webpack-cli npm i webpack-cli

webpack配置文件

webpack在执行构建时默认为从项目根目录下的webpack.config.js文件中读取配置

const path = require('path')
module.exports = { 
    // JS文件执行入口
    entry: './main.js',
    output: { 
        // 将所有一来的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 输出文件放到dist目录下
        path: path.resolve(__dirname, './dist')
    }
}

执行webpack

npx webpack

代码示例

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

// show.js
function show(content) {
  window.document.getElementById('app').innerText = 'hello,' + content
}

module.export = show

// main.js
const show = require('./show.js')
show('webpack')

执行结果

执行npx webpack 后生成dist文件夹以及文件夹下的bundle.js