模块化开发工具webpack

最新推荐文章于 2024-06-24 22:02:53 发布

CV菜鸟#

最新推荐文章于 2024-06-24 22:02:53 发布

阅读量6.2k

点赞数

分类专栏：前端开发文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_51179717/article/details/122031238

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、模块化开发概述

前端的js代码如何复用，怎样避免多文件之间的命名冲突，前端开发中这之类的问题如何解决，答案是模块化开发。来看看模块化开发的好处吧

创建common公共模块a.js文件

var name='小明';
var age = 18;
var flag = true;

function sum(num1,num2){
    return num1 + num2;
}

//导出方式一：对象
export {
    flag,
    sum
}
//导出方式二：变量
export var num = 1;

//导出方式三：方法
export function mul(num1,num2) {
    return num1 * num2;
}

//导出方式四：类
export class Person {
    run(){
        console.log('奔跑')
    }
}

//导出方法五：default（每个js文件只能导出一个默认的值）
//使用default关键字导出的数据，可以在import导入时自定义名称
const address = '北京市';
export default address;

以上a.js文件中使用export关键字导出我们需要在其它js文件中重用的属性，下面我们来创建b.js文件导入引用这些属性。

//导入
import {flag,sum} from "./aa.js";
import {num} from "./aa.js";
import {mul} from "./aa.js";
import {Person} from "./aa.js"
//导入默认的值
import addr from "./aa.js";
//统一全部导入
import * as a from './aa.js';

if(flag){
    console.log("小明是天才")
}

console.log(num);
console.log(mul(2,3))
var p = new Person();
p.run()
console.log(addr)
console.log(a.flag)

最后，在项目中使用js文件。创建hello.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/b.js" type="module"></script>
</head>
<body>

</body>
</html>

打开前端控制台即可看到引用的结果。需要注意的是，模块化开发是需要环境支持的，即export import的语法想要生效，需要将引入的js的type设置为model的，这样浏览器才能解析。且model模块化开发是ES6的新特性，也就是说ES6之前是不能解析这种语法的。

2、webpack 前端模块化打包工具

webpack最大的一个特点就是它能够将我们的通过AMD、CMD、Commons、ES6的规范编写的代码打包成浏览器能够识别的javascript代码，即作为模块化开发的底层支撑。
注意：webpack依赖于Node.js，Node js的各种包管理需要使用npm工具，在Nodejs安装的时候会自动下载

在控制台查看nodejs及webpack的版本
在这里插入图片描述

webpack的基本使用
使用webpack打包输出，在工程目录下打开cmd，运行以下命令。webpack以./src/index.js作为入口文件，-o是输出的意思，即打包输出到./build/built目录，且整体打包环境是开发环境。

webpack ./src/index.js -o ./build/built --mode=development

打包环境为生产环境

webpack ./src/index.js -o ./build/built --mode=production

配置webpack的入口文件与输出文件
在项目路径下编写webpack.config.js文件，以下配置的入口文件为./src/main，输出文件为（项目的绝对路径path）/dist/main.js

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'main.js',
    },
    mode:'production'
}

初始化项目，控制台输入命令 npm init，package name取英文名称，其它一路Entry即可。
以上配置完成以后，使用webpack打包就只需要在控制台输出webpack即可。

使用本地的webpack
一般情况下我们的项目不会使用全局的webpack，而是使用本地的webpack工具。
我们在终端运行的webpack操作都是使用的全局webpack工具，那么如何使用本地webpack工具呢。

安装本地（项目）的webpack工具。

npm install webpack@3.6.0 -save-dev

使用本地的webpack工具需要在package.json文件中配置
在这里插入图片描述
之后的打包操作我们不使用webpack命令（前面讲过webpack命令使用的都是全局webpack工具），而是使用npm run build命令，它才会去优先调用我们本地的webpack工具完成打包操作。

Loader
loader是webpack中一个非常核心的概念，我们知道webpack可以自动帮助我们处理js文件之间的依赖。webpack还可以帮我们将css、scss、less转css，将.jsx、.vue转成js文件等等，这些是webpack的扩展功能，需要使用对应的loder。

loader使用过程：
（1）npm安装对应的loader
（2）在webpack.config.js中的moudules关键字下进行配置。

例：安装css-loader与style-loader

npm install --save-dev css-loader@版本号
npm install --save-dev style-loader@版本号

安装成功之后在在webpack.config.js中添加配置即可使用

module: {
    rules: [
        {
            test: /\.css$/,
            //css loader只负责将css文件进行加载
            //style loader负责将样式添加进DOM中
            //使用多个loader时，是从右向左读
            use: [ 'style-loader','css-loader' ]
        }
    ]
}

用于处理css依赖的loader {‘css-loader’,‘style-loader’}
用于处理less依赖的loader{‘less-loader’}
用于处理图片文件依赖的loader{‘file-loader’,‘url-loader’]
用于将ES6转化为ES5代码的loader{‘babel-loader’}，其他依赖{‘babel-core’,‘babel-preset-es2015’}

总配置文件webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'main.js',
        publicPath:'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //css loader只负责将css文件进行加载
                //style loader负责将样式添加进DOM中
                //使用多个loader时，是从右向左读
                use: [ 'style-loader','css-loader' ]
            },
            {
                test: /\.less$/,
                //css loader只负责将css文件进行加载
                //style loader负责将样式添加进DOM中
                //使用多个loader时，是从右向左读
                use: ['style-loader','css-loader', 'less-loader']
            },
            {
                test:/\.(jpg|jpeg|png|gif)$/,
                use: [
                    {
                        loader:'url-loader',
                        options:{
                            limit:13000,
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader: 'babel-loader',
                    options:{
                        presets:['es2015']
                    }
                }
            }
        ]
    }
}

3、Plugin

html-webpack-plugin 用于自动生成一个index.html（可定制模板），且会在这个html引用我们的输出文件bundle.js。

安装开发环境用的html-webpack-plugin

npm install html-wenpack-plugin --save-dev

在webpack.config.js中添加配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	...,
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html'//定制模板，找到webpack.config.js同级下的index.html作为模板
        })
    ]
}

ugligyjs-webpack-plugin js压缩插件

webpack-dev-server 热部署，用于项目的快速测试

4、webpack的配置文件分离

要实现webpack的配置文件分离，要先下载webpack-merge包

npm install webpack-merge --save-dev

在项目目标下创建buid目录，创建webpack的基础配置文件config-base.js、开发时配置config-dev.js，发布时配置config-pro.js。

配置如下
config-base.js，注意打包输出地址要修改，输出地址的basepath始终为配置文件的目录，根据这个目录…/回退到自定义输出地址即可。

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js'
        // publicPath:'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //css loader只负责将css文件进行加载
                //style loader负责将样式添加进DOM中
                //使用多个loader时，是从右向左读
                use: [ 'style-loader','css-loader' ]
            },
            {
                test: /\.less$/,
                //css loader只负责将css文件进行加载
                //style loader负责将样式添加进DOM中
                //使用多个loader时，是从右向左读
                use: ['style-loader','css-loader', 'less-loader']
            },
            {
                test:/\.(jpg|jpeg|png|gif)$/,
                use: [
                    {
                        loader:'url-loader',
                        options:{
                            limit:13000,
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader: 'babel-loader',
                    options:{
                        presets:['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    mode:'development',
    resolve:{
    },
}

config-dev.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./config-base')

module.exports= webpackMerge.merge(baseConfig,{
    // devServer:{
//     contentBase: './dist',
//     inline:true
// },
})

config-pro.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./config-base')

module.exports= webpackMerge.merge(baseConfig,{
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ]
})

修改packge.json的配置

  "scripts": {
    "build": "webpack --config ./build/config-pro.js";
  }

CV菜鸟#

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模块化开发工具webpack

前端模块化开发基础应用
复制链接

扫一扫

专栏目录