前端工程化 webpack

ES6模块化规范定义：

每个js文件都是一个独立的模块

导入模块成员使用import关键字

暴露模块成员使用export关键字

ES6模块化基本语法

在NodeJS中安装babel

安装babel

    打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

    安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill

创建babel.config.js

    在项目目录中创建babel.config.js文件。

    编辑js文件中的代码如下：

const presets = [

            ["@babel/env",{

                targets:{

                    edge:"17",

                    firefox:"60",

                    chrome:"67",

                    safari:"11.1"

                }

            }]

        ]

        //暴露

        module.exports = { presets }

创建index.js文件

    在项目目录中创建index.js文件作为入口文件

    在index.js中输入需要执行的js代码，例如：

        console.log("ok");

使用npx执行文件

    打开终端，输入命令：npx babel-node ./index.js

 

默认导出语法  export default    //模块中只允许一次默认导出

默认导入语法  import 接受名称 from '模块标志符(文件路径)'

 

按需导出语法 export let s1 =10     //模块中可以出现多次按需导出

按需导入语法 import { 别名(s1) } from  '模块标志符(文件路径)'   //这里按需导入可以通过 as关键字声明别名

注：如同时存在 默认导出和按需导出 导入语法 需要这样写  import 默认导出名,{按需导出名} from  '模块标志符(文件路径)'

 

如只想单纯的执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可直接导入并执行代码

！！例：import '模块标志符(文件路径)'

 

Webpack 基本使用

1.npm install webpack webpack-cli -D

2.在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack

 3.webpack.config.js 文件中编写代码进行webpack配置，如下：

    module.exports = {

        mode:"development"//可以设置为development(开发模式)，production(发布模式)

    }

4.

在package.json文件添加运行脚本dev，如下：

    "scripts":{

        "dev":"webpack"

    }

5 npm run dev

 

指定打包的入口与出口

在webpak配置中新增

entry: path.json(__dirname, './src/idnex.js'), //入口文件的地址

output: {

        path: path.json(__dirname, './dist'), //写输出文件的地址

        filename: 'build.js' //输出文件的名称

    }

 

自动打包

1.  npm install webpack-dev-server -D

2.

修改package.json中的dev指令如下：

            "scripts":{

                "dev":"webpack-dev-server"

            }

3.将引入的js文件路径更改为：<script src="/bundle.js"></script>

4.打开网址查看效果：http://localhost:8080

注意： 自动启动一个实时的http服务器

打包生成的输出文件，默认放在项目根目录下，而且是虚拟的，看不见

 

生成预览页面

1.npm install html-webpack-plugin -D

2.修改webpack.config.js文件头部区域，添加如下配置信息

//导入包

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

            //创建对象

            const htmlPlugin = new HtmlWebpackPlugin({

                //设置生成预览页面的模板文件

                template:"./src/index.html",

                //设置生成的预览页面名称

                filename:"index.html"

            })

3.修改webpack.config.js文件向外暴露的配置对象

 module.exports = {

                ......

                plugins:[ htmlPlugin ]

            }

 

配置自动打包相关参数

 

webpack中的加载器

加载器基本使用

处理css文件

1.npm install style-loader css-loader -D

2.

配置规则：更改webpack.config.js的module中的rules数组

        module.exports = {

            module : {

                rules:[

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

  //test设置需要匹配的文件类型，支持正则

  //use表示该文件类型需要调用的loader

注意：

use 数组指定的loader顺序是固定的   

多个loader的调用顺序是 从后往前调用

 

处理less文件

1.npm install less-loader less -D

2修改rules规则

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

 

处理scss文件

1.npm install sass-loader node-sass -D

2.修改rules规则

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

 

配置postCSS自动添加css的兼容前缀

1.npm install postcss-loader autoprefixer -D

2.

在项目根目录创建并配置postcss.config.js文件

    const autoprefixer = require("autoprefixer");

    module.exports = {

        plugins:[ autoprefixer ]

    }

3.同处理文件一样 修改rules规则

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

 

打包样式和文件

1. npm install url-loader file-loader -D

2.

{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:"url-loader?limit=16940" }

 //limit用来设置字节数，只有小于limit值的图片，才会转换为base64图片

 

打包js文件中的高级语法

1.npm install babel-loader @babel/core @babel/runtime -D

2. npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3.

在项目根目录创建并配置babel.config.js文件

        module.exports = {

            presets:["@babel/preset-env"],

            plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]

        }

4.修改rules规则

{  test:/\.js$/,  use:"babel-loader",  exclude:/node_modules/}

 //exclude为排除项，意思是不要处理node_modules中的js文件

 

Vue单文件组件的基本用法 

template    组件的模板区域   

script         业务逻辑区域

style            样式区域

 

1.npm install vue-loader vue-template-compiler -D
2.

更改webpack.config.js的头部区域module中的rules数组

const VueLoaderPlugin = require("vue-loader/lib/plugin");

3.挂载组件

 

       plugins: [htmlPlugin, new VueLoaderPlugin()]

4.修改rules规则

{ test: /\.vue$/, use: 'vue-loader' },

 

使用VUE

1安装Vue

    npm install vue -S

2在index.js中引入vue：import Vue from "vue"

3.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件

    const vm = new Vue({

        el:"#first",

        render:h=>h(app)

    })

 

WebPack打包发布

1.配置package.json

    "scripts":{

        "dev":"webpack-dev-server",

        "build":"webpack -p"

    }

2.在项目打包之前，可以将dist目录删除，生成全新的dist目录