webpack环境搭建

最新推荐文章于 2024-07-29 19:52:19 发布

软小乖乖

最新推荐文章于 2024-07-29 19:52:19 发布

阅读量124

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43945122/article/details/116945038

版权

webpack环境搭建

一 webpack是什么

是一个模块化构建打包工具
vue，react 用的脚手架底层就是基于webpack搭建的
在公司主要用于公司内部搭建前端环境
掌握node webpack 可以说是晋升架构师的重要一环
学会webpack在vue脚手架也可以轻松的配置
构建工具除了webpack，还有grunt，gulp，rollup……

二 webpack的使用

webpack中文文档：https://webpack.docschina.org/concepts/

三创建package.json

npm  init  -y

四安装webpack ，webpack-cli

npm   i     webpack    webpack-cli   -D

五测试代码

展示效果：

路径：

index.html:

<!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>&hearts;嗷呜~</title>
</head>
<body>
    <h2 class="box">嗨，webpack</h2>
</body>
<script src="./src/style/test.css"></script>
<script src="./dist/bundle.js"></script>
</html>

style----test.css 样式

.box{
    color: red;
    background: rgb(218, 156, 156);
}
img{
    width: 300px;
}

data.json 数据
展示效果：
在这里插入图片描述

{
    "status":200,
    "statatusText":"成功返回",
    "content":[
        {"id":1001,"name":"魔法书","price":2300}
    ]
}

sum.js

function sum(a,b){
    return a+b;
}

module.exports = {
    sum:sum
}

main.js

const tools = require("./sum.js")
const _ = require("lodash")
import dataObj from "./data/mydata.json"//引入成功返回数据

// 引入样式
import "./style/test.css"
// 引入图片
import angelimg from "./imgs/1 (1).jpg"
import angel1 from "./imgs/1 (2).jpg"
import angel2 from "./imgs/1 (3).jpg"
import angel3 from "./imgs/1 (4).jpg"
import angel4 from "./imgs/1 (5).jpg"
import angel5 from "./imgs/1 (6).jpg"

// 打印我的data.json的数据
console.log("dataObj:", dataObj);

// 给sum.js中的sum 赋值
var result = tools.sum(100, 200)
// 打印result
console.log(result);

// 动态创建Div并插入字符串，然后返回odiv
function component() {
    // 创建div
    var odiv = document.createElement("div")
    // 创建图片
    var oimg = new Image();
    var oimg1 = new Image();
    var oimg2 = new Image();
    var oimg3 = new Image();
    var oimg4 = new Image();
    var oimg5 = new Image();
    // 图片路径
    oimg1.src = angel1
    oimg.src = angelimg
    oimg2.src = angel2
    oimg3.src = angel3
    oimg4.src = angel4
    oimg5.src = angel5
    // 给odiv添加内容 innerHTML可以解析
    odiv.innerHTML = "<p>天使恶魔</p>"
    // 在odiv中添加图片
    odiv.appendChild(oimg)
    odiv.appendChild(oimg1)
    odiv.appendChild(oimg2)
    odiv.appendChild(oimg3)
    odiv.appendChild(oimg4)
    odiv.appendChild(oimg5)

    return odiv
}
// 添加到body中
document.body.appendChild(component())

webpack.config.js
创建webpack配置文件，让webpack构建更强大
webpack默认配置文件：webpack.config.js

代码如下：

const path = require("path");

module.exports = {
    // 项目入口js
    entry: "./src/main.js",
    // 项目出口，项目打包后最终的文件位置
    output: {
        // 指定打包好的路径
        path: path.resolve(__dirname, "dist"),
        // 指定打包后的文件名
        filename: "bundle.js"
    },
    module: {
        // 配置loader的规则
        rules: [
              {
                  test: /\.css$/i,
                  use: ['style-loader', 'css-loader']
              },
              // {test:/\.(png|jpg|jpeg|gif|svg)/i,use:['file-loader']},
              {
                  test: /\.(png|jpg|jpeg|gif|svg)/i,
                  type: 'asset/resource'
              },
        ]
    }
}

六运行npm scripts脚本

package.json中
{
  ....
  "scripts": {
    "build": "webpack --watch"
  },
  .....
}

七 loader

loader:webpack资源加载器，因为webpack只支持js,json文件，对其他格式文件不支持，如果想要支持其他类型的文件，必须通过loader去转换这些文件，从而让webpack支持

经典的loader没有的错误：

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

八 webpack常用loader

1、css想着的loader:style-loader,css-loader
2、图片loader:
    webpack4.x:需要安装安装loader,并配置 file-loader,url-loader
    
    例如： {test:/\.(png|jpg|jpeg|gif|svg)/i,use:['file-loader']}
    webpack5.x:不用安装loader,直接调用内置的asset modules直接配置使用
    
     {test:/\.(png|jpg|jpeg|gif|svg)/i,type:'asset/resource'},
3、解析sass
	npm i sass-loader node-sass -D
	
	 {test:/\.s(a|c)ss/i,use:["style-loader","css-loader","sass-loader"]}
	 
4. 解析less
   npm i less less-loader -D
   
    {test:/\.less$/i,use:['style-loader','css-loader','less-loader']}
5.解析svg与图片的解析规则一致

   { test: /\.(png|jpg|jpeg|gif|svg)/i, type: 'asset/resource' }
   
6.解析ES6/7/8/9.....
    ES新语法通过babel转换，让浏览器支持
    
    第一步：安装babel依赖
      npm install --save-dev babel-loader @babel/core  @babel/preset-env
   
    第二步：配置webpack.config.js
         {
               test: /\.js$/,
               //排除node_modules
               exclude: /node_modules/,
               use: {
               loader: "babel-loader",
               options: {
               presets: ['@babel/preset-env']
               }
               }
           }
           
     第三步：创建babel.config.json
     {
      "presets": ["@babel/preset-env"]
    }

八自动创建html并注入静态资源文件

html-webpack-plugin

安装： npm i --save-dev html-webpack-plugin

    //实例化插件，以增强webpack的功能
    plugins: [
        new HtmlWebpack({
            //模板文件
            template: './public/index.html',
            //打包后的html位置和文件名
            filename:'home.html'
        })
    ]

九抽取css到单独的css文件中

安装：
npm install --save-dev mini-css-extract-plugin

参考：https://webpack.docschina.org/plugins/mini-css-extract-plugin/#root

十打包好的文件分类管理和清理无用的文件


js:
    output: {
        //指定打包后的文件名
        filename: 'js/bundle[hash].js',
    },
图片
    output: {
        assetModuleFilename: 'images/pic[hash][ext]',
      
    },
css:

  第一步：在webpack.config.js引入mini-css-extract-plugin'
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');

   第二步：在module.rules中配置
 { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] },

   第三步：实例化MiniCssExtractPlugin
    plugins: [
        new MiniCssExtractPlugin({
            filename:'css/global.css'
        })

清理无用的文件

   output: {
        ...
        clean:true,
        ...
    },

软小乖乖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack环境搭建

webpack环境搭建一 webpack是什么是一个模块化构建打包工具vue，react 用的脚手架底层就是基于webpack搭建的在公司主要用于公司内部搭建前端环境掌握node webpack 可以说是晋升架构师的重要一环学会webpack在vue脚手架也可以轻松的配置构建工具除了webpack，还有grunt，gulp，rollup……二 webpack的使用webpack中文文档：https://webpack.docschina.org/concepts/三创建packa
复制链接

扫一扫