webpack的基本配置和使用

最新推荐文章于 2024-05-07 23:34:19 发布

M@圆

最新推荐文章于 2024-05-07 23:34:19 发布

阅读量192

点赞数 1

本文链接：https://blog.csdn.net/MMY_L/article/details/105310559

版权

手动打包

1、新建一个 webpack-style 文件夹（尽量使用英文）
在控制台（快捷键ctrl + shift + ~）输入 npm init -y 用来创建包管理文件，这时会自动生成一个package.json的包
在这里插入图片描述

2、在根目录下建两个文件夹dist src（在src目录里建index.html 和main.js两个文件）
在这里插入图片描述

3、然后尝试打包webpack ./src/main.js ./dist/bundle.js （控制台输入）
如果你的webpack是4.0+版本，使用这个代码webpack ./src/main.js -o ./dist/bundle.js
此时在dist文件下会自动生成一个bundle.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="../dist/bundle.js"></script> -->
</head>
<body>
    
</body>
</html>

在浏览器查看，效果就出来了，不过这种方法每次都需要我们手动打包，麻烦，下面介绍自动打包。

自动打包（webpack-dev-server & webpack-plugin）

1、在控制台输入：cnpm i webpack-dev-server -D命令进行实时打包
然后在项目根目录新建文件：webpack.config.js
这时控制台会提醒你webpack-dev-server 依赖webpack，希望你本地装一下webpack
输入命令：cnpm i webpack -D

在这里插入图片描述
2、在webpack.config.js配置文件中写入以下代码

// 由于webpack是基于node进行构建的，所以，webpack的配置文件中，任何合法的node代码都是支持的
var path =require('path')


// 当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件入口和出口文件，此时，他会检查项目根目录目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象进行打包构建
// 如果要配置插件，需要在导出的对象中，挂载一个plugins节点
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口文件
    output:{
        path:path.join(__dirname,'./dist'), //输出路径
        filename:'bundle.js' //指定输出文件的名称
    }
}

3、这时在控制台输入webpack是能打包的，但是还没有实现实时构建，还需要在package.json中，添加一个脚本（箭头指向的那行）

--open：自动打开浏览器；
--port：声明端口号；
--contentBase: 运行目录
--hot: 热更新

 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

在这里插入图片描述
你再输入npm run dev 打开控制台卡看不到效果报了个错，这是因为script的问题

4、这时，你可以把你写的script代码注释掉，我们可以借助 cnpm i html-webpack-plugin -D
他会给我们在内存中声明个一模一样的页面，会自动帮我们把bundle注入到页面最底部；
安装好之后，打开webpack.config.js，配置以下内容（这里放入了完整代码）

// 由于webpack是基于node进行构建的，所以，webpack的配置文件中，任何合法的node代码都是支持的
var path =require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面
var htmlWebpackPlugin =require('html-webpack-plugin')

// 当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件入口和出口文件，此时，他会检查项目根目录目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象进行打包构建
// 如果要配置插件，需要在导出的对象中，挂载一个plugins节点
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口文件
    output:{
        path:path.join(__dirname,'./dist'), //输出路径
        filename:'bundle.js' //指定输出文件的名称
    },
    plugins:[ //所有webpack 插件的配置节点
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
            filename:'index.html' //设置生成的内存页面名称
        })
    ]
}

打开控制台输入：npm run dev 它会自动跳转到浏览器，然后你可以看到你的效果实现了。

引入.css文件（loader）

1、在src目录下创建一个css文件夹，然后建index.css文件，填写样式表
在这里插入图片描述
我们不建议在index.html中引入，因为会发起二次请求。
2、我们可以去main.js中通过import(es6写法)给它一个样式表的路径：

// 项目的js入口文件
console.log('ok')

import './css/index.css'

保存一下，会发现你的控制台报错了，它提示我们这个文件类型webpack处理不了，需要合适的loader去处理。
ctrl+c 终止批处理，然后Y（大小写无所谓）
3、在输入cnpm i style-loader css-loader -D 命令。
然后打开webpack.config.js文件，配置第三方loader模块，代码如下

 module:{
        //配置所有第三方loader模块的
        rules:[
            {
                test: /\.css$/, use: ['style-loader', 'css-loader']
            },//处理css文件的loader
        ]
    }

在这里插入图片描述
打开控制台输入：npm run dev 就可以看到代码效果了。

拓展：这里也可以配置.less 和.scss文件，方法雷同。cnpm i less-loader less -D cnpm i sass-loader node-sass -D

 module: { //这个节点，用于配置所有第三方模块加载器
        rules: [ //所有第三方模块的匹配规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, //配置处理.css文件的第三方loader规则 顺序 ：从后往前
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader','less-loader'] 
            }, //配置处理.less文件的第三方loader规则
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader','sass-loader'] 
            },//配置处理.scss文件的第三方loader规则
        ]
    }