webpack的配置，插件的安装使用，loader的配置使用，Babel的安装配置

最新推荐文章于 2023-04-13 00:03:49 发布

shutdown -d -t ∞

最新推荐文章于 2023-04-13 00:03:49 发布

阅读量203

点赞数 1

分类专栏： webpack 文章标签：学习成长

本文链接：https://blog.csdn.net/qq_43094463/article/details/103217233

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单说明一下，此文章作为我学习复习使用，如有错误，欢迎指正，谢谢！

webpack的学习之路

webpack和插件的安装配置

首先我们需要生成一个包管理文件

npm init -y

webpack我即选择了全局安装，在项目里我也安装了

npm i webpack -g   //全局安装命令

npm i webpack -s -D   //项目本地安装命令

手动创建webpack.config.js文件用来设置生成bundle.js文件的配置

const path = require('path');

//通过Node模块操作，向外面暴露一个配置对象
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//打包文件
    output:{
        path:path.join(__dirname,'./dist'),//打包好的文件存放地址
        filename:'bundle.js'//打包好的文件名
    },
    mode:'development',设置mode
}

安装webpack-dev-server用来自动生成bundle.js文件，避免我们每次更新代码都要重新打包bundle.js

cnpm i webpack-dev-server -D

如果你的cnpm命令无法使用，全局安装一下就好了

npm i cnpm -g

webpack-dev-server安装完成以后，因为webpack-dev-server不是全局安装，powershell无法运行命令
所以要配置信息运行
在package.json文件中找到scripts属性，其中添加以下值

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

配置完成运行

npm run dev

即可看到效果
在这里插入图片描述
在这里我贴一下我的index.html代码和main.js代码
index.html

<!doctype html>
<html lang="en">
<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>
    <script src="./bundle.js"></script>
</head>
<body>
<ul>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
</ul>
</body>
</html>

main.js

//index.html的入口文件
import $ from 'jquery';

$(function () {
    $('li:odd').css('backgroundColor','lightblue');
    $('li:even').css('backgroundColor',function () {
        return '#'+'D97634'
    });
})

接下来我们继续配置html-webpack-plugin插件
首先是安装

cnpm i html-webpack-plugin -D

然后在webpack.config.js文件中配置以下信息
在这里插入图片描述

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

//通过Node模块操作，向外面暴露一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),//打包文件
    output: {
        path: path.join(__dirname, './dist'),//打包好的文件存放地址
        filename: 'bundle.js'//打包好文件的文件名
    },
    mode: 'development',//设置mode
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ]
}

这个插件的作用：
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到内存中的页面里

到目前为止需要用到的插件都安装配置完成

接下来我们来安装配置loader

.css

li{
    list-style: none;
}

.less

ul {
  padding: 0;
  margin: 0;
}

.scss

html, body{
  margin: 0;
  padding: 0;
  background: url("../img/01.png");
  background-size: cover;
}
li{
  font-size: 12px;
  line-height: 30px;
}

安装style-loader、css-loader
less-loader、less
sass-loader、node-sass
file-loader、url-loader

cnpm i style-loader css-loader -D

cnpm i less -D
cnpm i less-loader -D

cnpm i node-sass -D
cnpm i sass-loader -D

cnpm i file-loader -D
cnpm i url-loader -D

安装完成后再配置webpack.config.js文件

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

//通过Node模块操作，向外面暴露一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),//打包文件
    output: {
        path: path.join(__dirname, './dist'),//打包好的文件存放地址
        filename: 'bundle.js'//打包好文件的文件名
    },
    mode: 'development',//设置mode
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=3000&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
            //limit给定的值是图片的大小，单位是byte，如果我们引用的图片大于或等于给定的limit值则不会被转为base64格式
            //的字符串，如果图片给定的值小于给定的limit值，则会被转为base64格式的字符串
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},//处理字体文件的loader
        ]
    }
}

最后的呈现效果
在这里插入图片描述
main.js文件

//index.html的入口文件
import $ from 'jquery';

import './css/index.css'
import './css/index.less'
import './css/index.scss'

$(function () {
    $('li:odd').css('backgroundColor', 'lightblue');
    $('li:even').css('backgroundColor', function () {
        return '#' + 'D97634'
    });
})

接下来我们来安装Babel及其配置

首先我们运行下面两套命令安装两套包：

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-pteset-stage-0 -D

然后，我们打开webpack.config.js文件，在module节点下的rules数组中添加新的匹配规则：

{test: /.js$/, use: 'babel-loader', exclude: /node_modules/}

注意：在配置babel的loader规则的时候，必须把node_modules目录通过exclude排除掉，原因有两个：
1.如果不排除，Babel会把node_modules中的所有JS文件一起打包，会非常消耗CPU，同时打包速度也会很慢
2.如果babel把node_modules中的JS全部转换，项目也就无法运行了

最后我们在项目的根目录创建一个叫做 .babelrc 的Babel配置文件，这个文件属于JSON格式
.babelrc

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime"]
}

到这里Babel就配置完成了，在运行过程中可能会出现报错信息，我们需要注意的是babel-core的版本和babel-loader的版本可能会出现排斥现象，如果报错，更换一下babel-loader的版本就可以了
在这里插入图片描述

好了，到这里，webpack的配置基本完成了，后续还有其他和webpack相关的学习，我会继续更新这篇文章

shutdown -d -t ∞

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack的配置，插件的安装使用，loader的配置使用，Babel的安装配置

简单说明一下，此文章作为我学习复习使用，如有错误，欢迎指正，谢谢！webpack的学习之路webpack和插件的安装配置首先我们需要生成一个包管理文件npm init -ywebpack我即选择了全局安装，在项目里我也安装了npm i webpack -g //全局安装命令npm i webpack -s -D //项目本地安装命令手动创建webpack.config...
复制链接

扫一扫