webpack 4.x，整理笔记

最新推荐文章于 2024-10-14 08:34:05 发布

JustStand

最新推荐文章于 2024-10-14 08:34:05 发布

阅读量213

点赞数

文章标签： js webpack webpack4.x

本文链接：https://blog.csdn.net/qq_42031498/article/details/101058162

版权

1.先安装nodeJS

命令：官网下载后傻瓜式安装即可
安装完成后在任意控制台执行： node -v，出现版本号说明安装成功，接着执行npm -v也会出现版本号

2.初始化项目

在项目根目录执行命令npm init -y初始化项目，会在根目录出现package.json文件，顺便把在根目录加上dist和src两个文件夹

3.安装webpack

我们一般局部安装来避免各个项目webpack版本冲突

npm i webpack webpack-cli -D

命令意思：安装webpack（不写版本号默认最新，要版本号后面加上@x.x，如webpack@3.3.7）和webpack-cli，-D=–save-dev意思是在局部、开发环境安装；之后我们在根目录新建一个webpack.config.js文件，在dist下创建一个index.html,在src下创建一个index.js，建好的目录是这个样子：

在这里插入图片描述
然后把后面用到的东西安装一下：style-loader 和 css-loader 以及jquery

npm i style-loader css-loader --save-dev

npm i jquery -D

我们在index.html和index.js下随便写点什么
我的index.html就写了个标题<h1 class="box">hole world!</h1>，
index.html:

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1 class="box">hole world!</h1>
//打包之后js放在body里
//<script src="./bundle.js"></script>
</body>
</html>

我的js就随便打印点什么。
index.js:

//引入css和jquery
import './css/index.css';
import $ from 'jquery';
var list=[1,2,5,6,23,4,8,6,3,458,6];
$.each(list,function (index,item) {
    console.log(index+':'+item);
});

index.css:

.box{
	 background-color: skyblue;
}

ps:没打包的时候我们引用资源是<link rel="stylesheet" href="xxx">和<script src="xxx"></script>有多少引用就写多少,但是用webpack的话，我们就遵循webpack的规则来，下面开始打包。

4.打包

打包之前写一下配置文件webpack.config.js

//引入路径处理模块
const path = require('path');
module.exports = {
    //入口（我们的js进webpack）
    entry: ['./src/index.js'],
    mode: "development",//开发环境
    //出口（webpack打包之后给我们的js）
    output: {
        filename: "bundle.js",
        //输出到当前路径下的‘dist’目录下
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        //加载css时遵循这些规则
        rules: [
            {
                //匹配css文件的正则
                test: /\.css$/,
                //用哪些loader来加载（使用顺序从右往左）
                use: [
                    'style-loader', 'css-loader'
                ]
            }

        ]

    }

};

之后执行命令：npx webpack打包，npx:可执行文件（即执行bin目录下的webpack），打包成功后我们就看到bundle.js文件了
在这里插入图片描述
然后去index.html里把<script src="./bundle.js"></script>注释放开，跑一下index.html看看有没有报错