Webpack基本使用

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
Webpack基本使用_第1张图片

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

全局安装
npm install -g webpack webpack-cli

安装后查看版本号
webpack -v

(1)安装webpack工具

npm install -g webpack webpack-cli

(2)创建js文件用于打包操作

Webpack基本使用_第2张图片

-- 文件a.js
function sub(a,b){
     
    return a-b;
}

module.exports={
     
    sub
}

-- 文件b.js
function add(a,b){
     
    return a+b;
}

module.exports={
     
    add
}


-- 文件style.css


body{
     

    background-color: red;
}


--文件main.js,需要引入需要打包的文件,直接引入或者关联引入
const a=require('./a.js')
const b=require("./b.js")
require("./style.css")
document.write(a.sub(3,2)+"---"+b.add(1,2))




(3)安装css加载器
npm install --save-dev style-loader css-loader

(4)构建配置文件
Webpack基本使用_第3张图片

const path=require("path");
module.exports = {
     
    //入口函数
    entry: "./src/js/main.js",
    //输出路径
    output: {
     
        path: path.resolve(__dirname,"./dest"),
        filename: "bundle.js"
    },
    module: {
     
        //CSS加载
        loaders: [
            {
      test: /\.css$/, 
                use: ["style-loader","css-loader" ]}
        ]
    }
};

(5)执行打包
webpack #有黄色警告
webpack --mode=development #打包后文件格式化
webpack --mode=production #打包后文件压缩一行

Webpack基本使用_第4张图片

(6)测试使用
创建html页面,引入打包后的文件即可


<html>
<head>
<meta charset="utf-8">
<script src="../dest/bundle.js">script>
head>
<body>
  
body>
html>

Webpack基本使用_第5张图片

你可能感兴趣的:(大前端,webpack)