webpck与vue的相关知识

什么是模块化

传统开发模式的主要问题

• 命名冲突
• 文件依赖

模块化：就是将单独的功能封装到一个模块（文件）中，模块之间相互隔离，可以通过特定的接口公开内部成员，模块也可以依赖于其他模块

好处：方便代码重用，提升开发效率，并且方便后期维护

ES6模块化

主要使用场景是在Node中

node之前的模块化规范主要是commonJs,从13.2版本之后，开始支持ES6模块化

修改type属性

首先创建a.js

var a = 10
var f1 = ()=>{
    console.log(20)
}

export default{
    a,
    f1
}

创建index.js

import a from './a.js'
console.log(a)

使用命令npm init -y创建package.json文件，并创建type值为moudle

输出：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5Koslqt-1615387076493)(D:\桌面\临时文件\MK图片\image-20210309022106106.png)]

注意：

1. 引入开发者自定义模块需要加路径
2. 模块要带后缀名
3. 使用 export default 导出 ，import导入名称可任意

按需导入导出

使用export直接放到要导出的变量或者函数的前面

export let a = 10

导入

import {a} from './a.js'

也可以为导入成员起别名

import {a as moduleA} from './a.js'
console.log(modeleA)

直接执行模块代码

模块中没有任何保留成员，导入此模块时直接执行代码即可

for(var i = 0;i<10;i++){
	console.log(i)
}

import './a.js'

webpack

因为浏览器对ES6的高级语法的支持并不友好，所以需要工具为我们进行转换

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

安装与配置

1. 初始化项目npm init -y

2. 在根目录下新建src目录作为存放模块的文件目录

3. src下新建index.html和index.js

4. 安装webpack

   npm install webpack webpack-cli --save-dev
   

   --save-dev也可直接写作-D,表示开发依赖，也就表示开发阶段需用用到这个包，项目上线后不需要

5. 配置webpack

   在根目录下新建webpack.config.js

   module.exports = {
   	mode:"develpoment"	//开发模式
   }
   

6. 在package.json中的scripts属性中配置启动命令

   "dev":"webpack"
   

7. 打包

   npm run dev
   

   打包成功后会在根目录创建dist目录，并生成main.js文件

8. 运行

   在index.html中引入main.js,运行即可

打包文件和出口文件

入口文件

就是项目中被请求时，第一个被访问的文件

对于webpack来说，打包的入口文件是index.js,因为index.js中引入了其他程序需要的模块

出口文件

打包之后的文件以及目录名称

webpack有一些默认配置

• 入口文件：src/index.js
• 出口文件：/dist/main.js

重新配置入口与出口文件

在webpack.config.js添加如下代码

const path=require('path')
module.exports={
    mode:'development', // 开发模式
    //入口文件
    entry:path.resolve(__dirname,'./src/index.js'),
    //出口文件
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"bundle.js"
    }
}

运行 npm run dev打包查看结果

注意：建议输出文件名称使用 bundle.js，而且注意修改 index.html 中的引入文件为 bundle.js

自动打包

不需要每次运行是都输入npm run dev

安装

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

修改package.json中的启动命令

"dev":webpack serve --open //open表示自动打开网页

运行

npm run dev

打包后，会在当前文件的内存中生成一个js文件。我们只需要在地址栏中输入路径就可以访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9dA9agX-1615387076496)(D:\桌面\临时文件\MK图片\image-20210310214252470.png)]

生成预览页面

安装

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

在webpack.config中编写如下代码

const HtmlWebpackPlugin = require('html-webpack-plugin')
cost htmlPlugin= new HtmlWebpackPlugin({
    template:'./src/index.html',//拷贝的源文件
    filename:'index.html'//拷贝目标文件
})

在plugins中加入

plugins:[htmlPlugin]

运行后页面就可以正常访问了

加载器

webpack 默认只能打包 .js 模文件，其他静态文件，如 .css，图片等默认不能处理，如果不加载对应的加载器，则会报错

处理css文件

在index.js中导入css问价

安装loder

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

配置webpack.config.js

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

处理less

安装

npm install less-loader less -D

rules中添加规则

{test:/\.less$/,use:['style-loder','css-loader','less-loader']}

处理图片

安装

npm i file-loader url-loader -D

配置webpack.config.js

{
    test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 614400 // 代码中使用的图片为500k
        }
    }]
}

处理高级js语法

安装babel转换器相关包

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

配置webpack.config.js

{
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
        presets: ['@babel/preset-env']
        }
    }
}

安装babel 语法的相关插件

npm i -D @babel/plugin-proposal-class-properties

配置webpack.config.js

options: {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
}

减小代码体积安装

npm i -D @babel/runtime @babel/plugin-transform-runtime

规则中的 plugins 中修改插件的配置

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}