web前端开发之webpack打包

前端工程化

一、模块化

1.1 服务器端模块化规范

CommonJS

• 模块分为单文件模块与包
• 模块成员导出：module.exports和exports
• 模块成员导入：require (‘模块标识符’)

例：

a.js

let a = 10
let b = 20
module.exports = {
     
    a,b
}

b.js

const a = require('./a.js')
console.log(a)

1.2 ES6模块化

ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，那如何把每个模块联系起来呢？

核心点就是模块的导入（import）与导出（export）。

1.2.1 module.exports

如上代码 我们把它改造成ES6格式

let a = 10
let b = 20
export default {
     
    a,b
}

b.js

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

注意

• 浏览器默认不支持ES6的import 我们需要使用npm init -y命令初始化
• 在package.json文件中新增配置 “type”: “module” 即可

1.2.2 按需导入导出(export)

a.js

export let a = 10

b.js

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

1.2.3 直接执行模块代码

a.js

for (let i = 0; i < 5; i++) {
     
    console.log(i)
}

b.js

import './a.js'

1.2.4 总结

• 只有在使用export default的时候 b.js中的变量名称可以随便起
• 如果直接使用export导出的时候 b.js中的变量必须与a.js导出变量一样 并且需要加{}
• 在浏览器中使用 需要给script标签设置 type=“module”

二、webpack

2.1 安装与配置webpack

2.1.1 安装webpack

• npm install webpack webpack-cli --save-dev
• 可简写为：npm install webpack webpack-cli -D
• dev 代表开发环境 save 代表生产环境

2.1.2 配置webpack

在当前目录下创建一个webpack.config.js文件

module.exports={
     
    mode:'development' //开发模式
    mode:'production' // 生产模式
}

然后在packpage.json中的scripts中写入

"dev":"webpack"

最后在终端中运行命令

npm run dev

2.2 打包出口和出口文件

默认打包src目录下的index.js

入口文件

就是项目或程序被请求的时候，第一个被访问到的文件，此文件再找相对应的模块进行处理

在当前项目中，index.html 是入口文件，因为我们请求的就是 index.html

但是对于 webpack 来说，打包的入口文件是 index.js，因为 index.js 中引入了其他程序需要的模块，并编写了相应的逻辑代码

出口文件

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

webpack 有一些默认配置

webpack.config.js

const path = require('path')
module.exports = {
     
    // mode:'development'
    mode: 'production',
    entry: path.resolve(__dirname, 'src/app.js'), // 入口文件
    output: {
     
        path: path.resolve(__dirname, 'dist'), //出口文件
        filename: 'bundle.js' // 打包后文件名
    }
}

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

2.3 自动打包

使用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。

安装：

npm install --save-dev webpack-dev-server

修改package.json中的启动命令

"dev":"webpack serve"

之后运行

npm run dev

注意：

• 利用webpack-dev-serve 进行打包后 地址为localhost:8080
• 打包后webpack-dev-serve 不会写入到任何输出文件 而是储存在内存当中

2.4 生成预览页面

当前存在的问题：localhost:8080 对应的是网站跟目录，index.html 在 src 目录下，访问起来比较麻烦

解决方案：可以将 src 目录下的 index.html 拷贝一份到根目录下，这样访问 localhost:8080 时，就会默认渲染 index.html

但是如果修改完 index.html 后还需要手动拷贝比较麻烦，可以使用插件：

HtmlWebpackPlugin

安装：

npm install --save-dev html-webpack-plugin

然后我们需要在webpack.config.js中 引入

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

同时我们需要安装

npm i loader-utils -D

配置HtmlWebpackPlugin

const htmlPlugins = new HtmlWebpackPlugin({
     
    template:'./src/index.html',  //要拷贝的文件
    filename:'index.html'           // 拷贝到哪里
})

plugins: [htmlPlugins]

之后逆行 npm run dev即可

但是根目录下并没有index.html 因为依然创建在内存中

2.5 总结

webpack-dev-serve:

• 会开启一个服务 地址是localhost:8080 默认会对应项目的根目录
• 当修改代码后 会自动的重新打包 并在内存中生成一个bundle.js文件 而不会覆盖dist目录下的bundle.js
• 访问bundle.js的路径为localhost:8080/bundle.js

html-webpacl-plugin:

• 根据配置 将指定路径下的html文件自动拷贝到指定目录下(例如 根目录)
• 只要每次运行打包命令 就会进行拷贝
• 也一样存在于内存中

2.6 加载器

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

webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。

2.6.1 处理css文件

安装加载器

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

配置 webpack.config.js

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

loader 的调用是从后往前掉

2.6.2处理less文件

安装

npm install less-loader less -D

配置

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

之后重新打包即可

2.6.3 处理图片和文字

安装

npm i file-loader url-loader -D

配置

{
     
   test: /\.png$/,
   use: [{
     
      loader: 'url-loader',  //使用url-loader处理打包图片
       options:{
     
          limit:10750
       }
    }]
}

• 图片大小如果小于limit值 作为base64位码引入并打包
• 反之不会打包 而是作为资源引用

2.6.4 处理高级JS语法

安装

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

webpack.config.js 中添加如下规则

            {
     
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, //排除作用 node_modules下不要处理
                use: {
     
                    loader: 'babel-loader',
                    options: {
     
                        presets: ['@babel/preset-env'],  //处理方式
                    }
                }
            }

在index.js中写入

class Person{
     
    static age = 10
}
console.log(Person.age)

完成后我们执行打包命令 npm run dev

之后我们发现会报错 错误原因在于没有安装babel语法的相关插件

安装：

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

然后在上面规则的 option 属性中添加配置

plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置