四时宝库

程序员的知识宝库

2024年10月04日

webpack入门（webpack简单使用）



实例

创建目录webpack-study，然后分别创建如下文件

// $root/com-demo.js
export default function(){
    document.write("Hello world. com-demo.js");
} 
// $root/index.html
<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>webpack demo</title>
    </head>
    <body>
        <script src="./dist/bundle.js"></script>
    </body>
</html>
// $root/index.js
import comdemo from './com-demo.js'

document.write("01 webpack app <br/>");

comdemo();
?

然后执行如下语句：

development production\none

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

再配置此目录为nginx的一个vhost

server {
	
		listen 80;

        server_name webpack.my-soft.net.cn;

        location /
        {
                root   D:\\Work\\github\\webpack-study\\;
				autoindex on; 
                index  index.html index.htm;
        }
		
		location /d3/
		{
			root D:\\Work\\github\\;
			autoindex on; 
			index  index.html index.htm;
		}
		
}

启动nginx，配置host，即可通过浏览器访问 ，获得如下页面

使用npm配置文件

增加如下文件,然后使用命令npm run build可以执行同样的构建

// $root/packagejson
{
    "scripts":{
        "build":"webpack --entry=./index.js --output-filename=bundle.js --mode=development"
    }
}

默认目录

调整目录结构，建立默认的源代码目录src，将html、js移动到src目录。则不用再指定--entry选项。

{
    "scripts":{
        "build":"webpack  --output-filename=bundle.js --mode=development" 
    }
}

使用webpack配置文件

// webpack.config.js
module.exports ={
    entry:"./src/index.js",
    output:{
        filename:"bundle.js",
    },
    mode:"development",
}
{
    "scripts":{
        "build":"webpack" 
    }
}

处理js模块

可以用两种形式编写js模块，都是用文件名作为模块名。

CommonJS

// 导出属性与函数
module.exports = {
    name:"calc",
    add:function(a,b){
        return a+b;
    }
}
// 导出新的属性与函数
module.exports.desc = "commonJs-index.js-description.";
module.exports.sub = function(a,b){return a-b;};
?
var name = "index.js";

var cjs_calc = require("./calc.js");
console.log("cjs:",name);

// 导出属性与函数
module.exports = {
    name:"calc",
    add:function(a,b){
        return a+b;
    },
    div:cjs_calc.div,
    mul:cjs_calc.mul,
}
// 导出新的属性与函数
module.exports.desc = "commonJs-index.js-description.";
module.exports.sub = function(a,b){return a-b;};
?

ES6 Module

export default {
    name :"es6 component",
    addm:function(){
        var res = 0;
        for(var i=0;i<arguments.length;i++)
            res += arguments[i];
        return res;
    }
}

export const ec_name = "es6 ec name ";
export const mulm = function () {var res = 1;
    for(var i=0;i<arguments.length;i++)
        res *= arguments[i];
    return res;}

const fname = "first name of es6";
const fsubm = function(){var res = 1000;
    for(var i=0;i<arguments.length;i++)
        res -= arguments[i];
    return res;};
    
export{fname,fsubm as msub};

引用模块

两个js模块的写法都可以混用。

import comdemo from './com-demo.js'
import cjs from "./commonJS/index.js"

import * as es6 from "./es6/index.js"

document.write("01 webpack app <br/>");

//cjs();
comdemo();

console.log(cjs.name,cjs.add(1,2));

document.write("<br/>",cjs.name,cjs.add(1,2));

document.write("<br/>",cjs.desc,cjs.sub(1,2));

document.write("<br/>",cjs.div(4,2)," - ",cjs.mul(1,2));

document.write("<br/>",es6.msub(1,2,3,4)," ",es6.mulm(1,2,3,4,5));
?

js入口

可以设定多个入口，webpack会遍历，并处理相关引用到的模块。但是合并的文件可以是一个或者是多个。

// 单页面，多入口的指定，可以使用数组
// webpack.config.js
module.exports ={
    entry:{
        pageA:[
            "./src/index1.js",
            "./src/index.js"
        ],
        pageB:"./src/index2.js",
    },
    output:{
        filename:"[name].js",
    },
    //mode:"development", 
    mode:"production",
    devServer:{
        publicPath:"/dist",
    }
}

预处理器

除了处理js，便于实现多人协作外。webpack还可以处理css，html，图片与字体等。这些都是通过预处理器来完成的。当然js也可以使用typescript、babel等来进行处理。


可以使用webpack.config.js来配置不同扩展名的预处理规则，指定先后顺序，排除一些目录、设定预处理的选型参数等。

?

CSS

处理CSS需要安装一个预处理器，否则会提示如下错误。

npm install css-loader style-loader
?
// webpack.config.js
module.exports ={
    entry:{
        pageA:[
            "./src/index1.js",
            "./src/index.js"
        ],
        pageB:"./src/index2.js",
    },
    output:{
        filename:"[name].js",
    },
    //mode:"development", 
    mode:"production",
    devServer:{
        publicPath:"/dist",
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["style-loader",'css-loader'],
            }
        ]
    }
}
?

构建后访问页面，可得到如上html

JS（ES6=>ES5）

使用babel-loader可以帮助处理js的兼容性问题。

npm install barbel-loader @babel/core @babel/preset-env

typescript

使用ts-loader可以处理typescript。

npm install ts-loader typescript 
{
//...webpack.config.js  rules 
                // 默认从后往前使用处理器
                use:"ts-loader",        
                test: /\.ts$/,
                include: /src/,
                // 排除指定的目录。冲突时，排除的优先级更高
                exclude:/node_modules/,
},
// ..

增加tsconfig.json配置文件

html

安装预处理器后，编辑webpack.config.js，然后可在js中加载html片段。

npm install html-loader --save-dev
{
                test:/\.html$/,
                use: 'html-loader'
            },
import htmlBody from "./index.html"
document.write(htmlBody);

html模板<handlebars>

npm install handlebars handlebars-loader

可以预先编辑好.handlebars扩展名的html片段，使用{{varname}}设定变量，然后用json对象传递参数进去。

jpg（png、gif...）

npm install file-loader url-loader --save-dev
 npm run build

可以使用file-loader或url-loader来打包这类资源，然后在js中使用返回的publicPath引用。

{// 处理图片

                test:/\.(png|jpg|gif)$/,

                use:{

                    loader:'file-loader',

                    options:{

                        name:'./assets/[name].[ext]',

                        publicPath:'./assets/',

                    }

                }



            },
import i001 from "./images/001 (15).png";



console.log(i001);

url-loader相对于file-loader可以设定图形文件尺寸，如果小于则返回base64编码，否则返回publicPath。配置文件如下：

 {// 处理图片

                test:/\.(png)$/,

                use:{

                    loader:'url-loader',

                    options:{

                        limit:100*1024,

                        name:'./assets/[name].[ext]',

                        publicPath:'./assets/',

                    }

                }



            },

vue组件

webpack与vue合作能够处理vue的组件加载。

npm install vue-loader vue-template-compile css-loader vue
test:/\.vue$/,
use:'vue-loader',

自定义loader

  • 创建loader目录：如demo-loader
  • 在目录下执行npm init -y
  • 创建index.js,实现下列方法
module=exports= function(content){
    var demo = "/* director by gaussgao*/\n\n";
    return demo + content;
}
  • 然后安装此模块npm install demo-loader
  • 最后，就可以使用此模块了
{ // 自定义

                test:/\.txt$/,

                use:{

                    loader:"sdm",

                    options:{

                        name:'./assets/[name].[ext]',

                        publicPath:'./assets/',

                    }

                },

                include: /src/,

            },

webpack最后都会输出对应的js

标签：webpackoutput 

作者:sishi88 , 分类:技术教程 , 浏览:7 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接