Vue学习四（webpack）

最新推荐文章于 2024-04-22 09:35:58 发布

噫吁嘻嘻嘻嘻

最新推荐文章于 2024-04-22 09:35:58 发布

阅读量140

点赞数

文章标签： vue

原文链接：https://blog.csdn.net/Q111900/article/details/109276333

版权

一、什么是webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

（1）模块

webpack的核心是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。

（2）打包

二、webpack的安装

要先安装nodejs，安装以后：

全局安装

npm i webpack -g

在项目中安装

npm i webpack --save-dev

三、webpack的使用

1.入门

（1）建两个文件夹分别为src和dist建一个文件为index.html,在src下建一个文件main.js，在建一个文件夹js，里面建一个mathUtils.js。

在这里插入图片描述

（2）在mathUtils.js里写入简单函数并导出，在main.js中导入

mathUtils.js:

function add(num1, num2) {
    return num1 + num2
}

function mul(num1, num2) {
    return num1 * num2
}

module.exports = {
    add,
    mul
}

main.js:

//使用commonjs模块化的规范
const {
    add,
    mul
} = require('./js/mathUtils.js')

console.log(add(20, 13));
console.log(mul(20, 30));

（3）用webpack命令打包

在项目的终端中输入：

webpack ./src/main.js ./dist/bundle.js
//或者
webpack ./src/main.js -o ./dist/bundle.js

在这里插入图片描述

（4）在index.html中引用新增的文件bundle.js

<script src="./dist/bundle.js"></script>

（5）运行index.html文件在这里插入图片描述

2. 通过配置文件来使用webpack

（1）在终端中使用npm init命令自动创建这个package.json文件

npm init

在这里插入图片描述

（2）在文件的根目录下建一个webpack.config.js文件

const path = require('path')

module.exports = {
    entry: './src/main.js', //入口文件
    output: {
        //绝对路径
        //_dirname是node.js中的全局变量，指向当前执行脚本所在的目录
        path: path.resolve(__dirname, 'dist'), //打包后文件存放的位置
        filename: 'bundle.js', //打包后的文件名
    },
}

我们可以通过webpack代替 webpack ./src/main.js -o ./dist/bundle.js 的命令进行打包，这样就方便很多

在这里插入图片描述

（3）我们还可以通过npm的命令对文件进行打包，不过要在package.json文件进行配置，在script对象中添加命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

然后我们就可以通过npm run build对文件进行打包

在这里插入图片描述

3.配置Loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。loader可以加载css、图片，也包括一些高级的，将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

（1）css文件

在src文件夹下再建一个css文件，在css文件夹下建一个normol.css文件

body {
    background-color: black;
}

在main.js中导入

require('./css/normol.css')

用npm命令来安装 css-loader 和 style-loader

 npm install style-loader --save-dev
 npm install css-loader --save-dev

在webpack.config.js中的module关键字下进行配置

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
}

用npm run build 进行打包后，打开浏览器运行。

（2）less文件

在css文件夹下建一个special.less文件

@fontSize:50px;
@fontColor:red;

body{
    font-size: @fontSize;
    color: @fontColor;
}

在main.js中导入

require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")

用npm命令来安装 less-loader 和 less

npm install --save-dev less-loader less

在webpack.config.js中的module关键字下进行配置

module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
}

用npm run build 进行打包后，打开浏览器运行

（3）图片

在src文件夹下再建一个img文件，在img文件夹下放两张图片，一张图片较大（大于limit），一张图片较小（小于limit），在normol.css中使用较小的图片

normal.css

body{
    background: url("../img/1.jpg");
}

用npm命令来安装 url-loader

npm install --save-dev url-loader

在webpack.config.js中的modules关键字下进行配置

module.exports = {
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 130000,
                },
            }]
        }]
    }
}

用npm run build 进行打包后，打开浏览器运行。当加载的图片小于limit时，会将图片编译成base64字符串形式

修改normol.css文件，将较大图片替换成较小图片的url；并且下载file-loader的模块。

npm install --save-dev file-loader

在webpack.config.js中进行配置

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 130000,
                    name: 'img/[name].[hash:8].[ext]' //图片的命名及路径
                },
            }]
        }]
    }
}

再次进行打包发现，dist文件下多了一个img的文件夹，里面有一张图片，打开浏览器运行。

（4）babel文件

用npm命令来安装 babel-loader和 babel-core及babel-preset-env还有webpack

npm install babel-loader babel-core babel-preset-env webpack
npm i @babel/core --save-dev
npm i @babel/preset-env --save-dev

在webpack.config.js中的module关键字下进行配置

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            //exclude：排除  include：包含
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }, ]
    }
}

用npm run build 进行打包后，打开bundle.js文件发现代码都是用es5写的

（5）.vue文件

在src文件夹下再建一个vue文件夹，在vue文件夹下建一个App.vue文件

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btn">按钮</button>
    <h3>{{name}}</h3>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "hello world",
      name: "hhhhhh"
    };
  },
  methods: {
    btn() {}
  }
};
</script>

<style>
.title {
  color: yellow;
}
</style>

在main.js中写入：

import Vue from 'vue'
import App from './vue/App.vue'
new Vue({
    el: '#app',
    template: `<App></App>`,
    components:{
        App
    }
})

用npm命令来安装 vue-loader和vue-template-compiler及vue。

npm i vue --save
npm i vue-loader vue-template-compiler --save-dev

在webpack.config.js中的modules关键字下进行配置：

module.exports = {
    module: {
        rules: [{
            test: /\.vue$/,
            use: ['vue-loader']
        }]
    }
}

在webpack.config.js中的plugins关键字中引入插件：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin(),
    ],
}

在webpack.config.js中的resolve中进行别名的配置：

module.exports = {
    resolve: {
        //别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.css', '.vue']
    },
}

在index.html中写入：

<body>
    <div id="app"></div>
</body>

用npm run build 进行打包后，打开浏览器运行。

4.使用插件plugin

（1）plugin通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
（2）loader和plugin区别

loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

（3）plugin的使用过程∶

步骤一︰通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二︰在webpack.config.js中的plugins中配置插件。

例：HtmlWebpackPlugin插件

作用是依据一个简单的index.html模板，生成一个自动打包后的文件index.hml。

（1）用npm命令安装此插件

npm i html-webpack-plugin --save-dev

（2）在webpack.config.js中进行配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'  //模板
        }),
    ],
}

（3）在index.html中删除引用script的代码

（4）npm run build 打包后发现dist下多了一个index.html文件

5、搭建本地服务

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性∶

contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port:端口号
inline:页面实时刷新
historyApiFallback :在SPA页面中，依赖HTML5的history模式

（1）用npm命令来安装webpack-dev-server

npm i webpack-dev-server --save-dev

（2）在package.json文件中进行配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"  //--open参数表示直接打开浏览器
  },

（3）用npm run dev运行项目

npm run dev

webpack.config.js文件的完整内容：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    mode: 'development',
    output: {
        //绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 130000,
                        name: 'img/[name].[hash:8].[ext]' //图片的命名及路径
                    },
                }]
            },
            {
                test: /\.js$/,
                //exclude：排除  include：包含
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
    resolve: {
        //别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.css', '.vue']
    },
}

main.js的完整内容

//使用commonjs模块化的规范
const {
    add,
    mul
} = require('./js/mathUtils')

console.log(add(20, 13));
console.log(mul(20, 30));

require('./css/normol.css')

require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")

import Vue from 'vue'
// // import App from './vue/app'

// //先下载npm i vue-loader vue-template-compiler --save-dev
import App from './vue/App.vue'

new Vue({
    el: '#app',
    template: `<App></App>`,
    components:{
        App
    }
})

学习来源：coderWhy老师的视频
博客参考：谯老师的博客~

噫吁嘻嘻嘻嘻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习四（webpack）

一、什么是webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。（1）模块webpack的核心是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。（2）打包二、webpack的安装要先安装nodejs，安装以后：全局安装n
复制链接

扫一扫