webpack@4.x（学习笔记01）

最新推荐文章于 2023-08-10 10:14:06 发布

Geek码农

最新推荐文章于 2023-08-10 10:14:06 发布

阅读量433

点赞数

分类专栏： webpack 文章标签： webpack css-loader less-loader

本文链接：https://blog.csdn.net/qq_40557812/article/details/118726269

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

资料：webpack

一、安装

1、全局安装

npm install --global webpack

2、局部安装（案例使用中）
创建个新的文件夹命名webpack01,在命令窗口打开

初始化文件夹

npm init -y
//或者
npm init

//前者需要手动确认package.json中的各种描述，关于package.json这里不深描述了
//成功后文件夹下有一个package.json文件

局部安装webpack
webpack4.x版本需要另外安装webpack-cli

npm i webpack@4.31.0 webpack-cli@3.3.2 -D

注意：
这里版本用的是我本地学习用的版本，如果webpack版本不一致会有一些差异；
webpack如果全局安装后再局部又安装了，且两次安装版本不一致会报错；

二、初始目录

在webpack01文件夹下新建webpack.config.js文件，新建src文件夹用于存放开发代码、src下新建css文件夹、js文件夹、index.js、index.html文件

文件目录在这里插入图片描述

三、entry与output配置

webpack.config.js中配置项目需要用module.exports导出

module.exports={
//配置内容
}

entry
配置打包入口，单个入口直接配置值，多个入口时候需要配置对象，这里先不考虑多个入口情况

 entry:'./src/index.js'

output
出口，打包后生产的bundle存放位置
这里需要使用到node的path模块来方便路径拼接。

output:{
        filename:'[name].js',//生成后的bundle名称，[name]取默认的main
        path:path.resolve(__dirname,'dist') //生成后的路径 放在src同级别下的dist文件夹下面
    }

运行测试

webpack.config.js配置完整代码

const path = require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    }
}

src下代码填写
js文件夹下新建index.js文件

const func = ()=>{
    console.log('index.js run');
}

module.exports ={
    func
}

src目录下的index.js引入js中的index.js文件并调用

import {func} from './js/index';
func();

package.json配置打包命令
scripts下新增build命令

"scripts": {
    "build": "webpack"
  },

运行

cmd进入webpack01文件夹中运行命令

npm run build

再看src同级是否有出现dist文件夹，文件夹中有一个bundle文件，即打包成功
注意：这个时候会提示警告没有设置mode；开发模式下设置mode:‘development’，打包后的bunlde也是不压缩的，可以查找其中包含写的业务代码。

四、配置html模板

开发中有时需要把html页面作为模板打包，这个时候需要使用到插件html-webpack-plugin.

配置html-webpack-plugin

const path = require('path');
// html模板
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    mode:'development',
    plugins:[
        new htmlWebpackPlugin({
            template:path.resolve(__dirname,'src/index.html')
        })
    ]
}

2、安装依赖

npm i html-webpack-plugin@3.2.0 -D

五、配置css、less

css、less配置
配置module中的rules

const path = require('path');
// html模板
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:'./src/index.js',
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    mode:'development',
    module:{
        rules:[
            {
                // css
                test:/\.css$/i,
                use:['style-loader','css-loader']
            },{
                // less
                test:/\.less$/i,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.resolve(__dirname,'src/index.html')
        })
    ]
}

安装依赖

//css
npm i style-loader@0.23.1 css-loader@2.1.1 -D

//less
npm i less@3.9.0 less-loader@5.0.0 -D

//less-loader版本过高会报错配置信息出错

css测试代码编写
css文件夹下新建index.css、index.less文件

//index.css

.box{
    width: 100%;
    height: 300px;
    background: #f1f1f1;
}



//index.less
.content{
    width: 100%;
    height: 200px;
    background-color: #eeeeee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .items{
        width: 50px;
        height: 50px;
        background: rgb(222, 235, 50);
    }
}

//index.html   src文件下的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div class="box">
        <div class="content">
            <div class="items">1</div>
            <div class="items">1</div>
            <div class="items">1</div>
        </div>
    </div>
</body>
</html>

运行打包

npm run build

Geek码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack@4.x（学习笔记01）

资料：webpack一、安装1、全局安装npm install --global webpack2、局部安装（案例使用中）创建个新的文件夹命名webpack01,在命令窗口打开初始化文件夹npm init -y//或者npm init//前者需要手动确认package.json中的各种描述，关于package.json这里不深描述了//成功后文件夹下有一个package.json文件局部安装webpackwebpack4.x版本需要另外安装webpack-clinp
复制链接

扫一扫