webpack4的安装、打包（详细版）

webpack4的版本

	webpack4.41.5

首先我们要创建一个html的工作文件夹，然后用VS Code进入这个文件夹

然后初始化这个文件夹，这里我们用yarn命令初始化

npm i yarn -g //全局安装yarn
yarn init -y	//初始化
//也可以用npm
npm init -y

在我们工作根目录下创建src文件夹
在src文件夹下创建index.html和index.js两个文件（用来打包测试）
在index.html文件写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
        <li>我是一个帅哥</li>
    </ul>
</body>
</html>

在index.js里写入



import $ from 'jquery'  //ES6新语法 导入 jquery，直接调用这个js文件是错误的

$(function(){
    $('li:odd').css('backgroundColor','green') //奇数行变为 粉色
    $('li:even').css('backgroundColor','pink')//偶数行变为浅蓝色
    
})

写完这两个文件后我们用下载 jquery 包，因为我们测试要用到

yarn add jquery -S

如果下载依赖出错时
在code 终端里写入

yarn config set ignore-engines true

到这里时我们先运行一下HTML文件看看js是否生效

提示出错无法加载资源
这时我们就要打包了
打包命令

yarn add webpack webpack-cli //先安装webpack和webpack-cli
npx webpack //打包

运行结果：

这时在根目录下会多出一个dist文件，怎么在此文件下回有一个main.js文件，这文件就是打包后的js文件
我们把html移到dist文件下，并把里面的

<script src="./index.js"></script>

改为

<script src="./main.js"></script>

再次运行

此时我们的js文件可以正常调用了
如果细心的伙伴就会发现我们在打包完成时他会出现一个警告

它要我们工作根目录下配置一个webpack.config.js文件
以配置打包的规则
webpack.config.js文件我们把内容写为

//webpack 是node写出来的 要用node的写法
let path = require('path')//node语法 导入 path
module.exports = {
    mode: 'development',//打包的模式,production(生产模式),development（开发模式）
    entry: './src/index.js',//入口，默认打包文件位置
    output: {
        filename: 'main.js',//出口，打包后的文件名
        //打包在那个路径必须要绝对路径，要相对路径要导入 path
        path: path.resolve(__dirname,'dist')//把打包的文件放在那个路径,__dirname 是在当前文件生成
    }
}