【VUE2.0】1、 webpack及插件的配置和使用

前端工程化的概念

        模块化

        组件化

        规范化

        自动化 

        前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

        早期的前端工程化解决方案：

                grunt

                gulp

        目前主流前端工程化解决方案：

                webpack

                parcel

webpack

        概念：webpack是前端项目工程化的具体解决方案

        主要作用：提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性、性能优化等功能

webpack的安装和配置

        1初始化包管理配置文件package.json         cnpm init -y       

        2安装jquery                                                 cnpm i jquery -S       

        3安装webpack                                             cnpm i webpack@5.42.1 webpack-cli@4.7.2 -D   

        4根目录创建webpack.config.js文件：

module.exports = {
    mode:'development'  //可选development（开发环境）和production（生产环境）
}

        5在package.json 的scripts节点下，新增dev脚本：

"scripts": {
    "dev": "webpack"
}

        6启动webpack打包构建项目        cnpm run dev

        7在webpack4.X和5.X版本中：

                默认的打包入口文件：src目录下的index.js文件

                默认的输出文件路径：dist目录下的main.js文件

                可以在webpack.config.js文件中指定webpack的entry和output属性来修改默认值：

const path = require('path')

module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index1.js'),//打包入口修改为src目录下的index1.js
    output:{
        path:path.join(__dirname,'./output/'),
        filename:'bundle.js'                     //输出出口修改为output目录下的bundle.js
    }
}

webpack-dev-server插件的安装和配置

        1作用：持续监听js文件变动，文件保存则自动打包js文件并刷新浏览器

        2安装：cnpm i webpack-dev-server@3.11.2 -D

        3配置：在package.json 的scripts节点下，修改dev脚本：

"scripts": {
    "dev": "webpack serve"
}

        4运行：cnpm run dev

        5发现报错，错误由 webpack-cli版本问题，换版本安装：

                cnpm i webpack-cli@4.9.0 -D

                cnpm i webpack-cli -D  安装最新

        6运行：cnpm run dev，正常

        7按照运行结果提示，访问localhost:8080访问查看效果

        8注意：打包生成的bundle.js文件在内存中，路径为根目录下

html-webpack-plugin插件的安装和配置

        1作用：

                监听html文件变动，文件保存则自动刷新浏览器

                将指定html文件复制生成到指定路径下，存在内存中

                生成的html文件（内存中）自动引用打包生成的bundle.js文件（内存中）

        2安装：

                cnpm i html-webpack-plugin@5.3.2 -D

        3配置：

                在webpack.config.js文件中配置如下：

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//指定源文件路径
    filename:'./index.html'     //指定生成文件的存放路径
})

module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index1.js'),//打包入口修改为src目录下的index1.js
    output:{
        path:path.join(__dirname,'./output/'),
        filename:'bundle.js'                     //输出出口修改为output目录下的bundle.js
    },
    plugins:[htmlPlugin],       //引用插件
}

        4运行 cnpm run dev

        5注意 生成的index.html文件存在于内存中

webpack.config.js中的devServer节点配置详解

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//指定源文件路径
    filename:'./index.html'     //指定生成文件的存放路径
})

module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index1.js'),//打包入口修改为src目录下的index1.js
    output:{
        path:path.join(__dirname,'./output/'),
        filename:'bundle.js'                     //输出出口修改为output目录下的bundle.js
    },
    plugins:[htmlPlugin],       //引用插件
    devServer:{
        open:true,              //初次打包完成后，自动打开浏览器
        host:'127.0.0.1'        //指定打包后的项目访问地址，默认localhost
        port:80,                //指定打包后的项目访问端口号,默认8080
    }
}

loader加载器的作用

        webpack默认只能打包处理.js后缀的模块。若需打包处理其他类型的文件，需要调用对应的loader加载器去处理打包，否则会报错

        css-loader可以打包处理.css文件

        less-loader可以打包处理.less文件

        url-loader可以打包处理与url路径相关的文件

        babel-loader可以打包处理webpack无法处理的高级js语法

loader加载器的处理过程

打包处理css文件、less文件、文件路径

        安装：

                cnpm i style-loader@3.0.0 css-loader@5.2.6 -D

                cnpm i less-loader@10.0.1 less@4.1.1 -D

                cnpm i url-loader@4.1.1 file-loader@6.2.0 -D

        配置：在webpack.config.js文件中配置如下：

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//指定源文件路径
    filename:'./index.html'     //指定生成文件的存放路径
})

module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index1.js'),//打包入口修改为src目录下的index1.js
    output:{
        path:path.join(__dirname,'./output/'),
        filename:'bundle.js'                     //输出出口修改为output目录下的bundle.js
    },
    plugins:[htmlPlugin],       //引用插件
    devServer:{
        open:true,              //初次打包完成后，自动打开浏览器
        host:'127.0.0.1'        //指定打包后的项目访问地址，默认localhost
        port:80,                //指定打包后的项目访问端口号,默认8080
    },
    module:{
        rules:[                    
            {test:/\.css$/,use:['style-loader','css-loader']},//use数组中，从右往左调用
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.jpg|png|gif$/,use:'url-loader?limit=1000'},
        ]
    }
}

打包处理js文件中的高级语法

        概述：webpack只能打包一部分高级的JavaScript语法。对于webpack无法处理的高级js语法，需要借助babel-loader进行打包处理

        安装：cnpm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

        配置：

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//指定源文件路径
    filename:'./index.html'     //指定生成文件的存放路径
})

module.exports = {
    mode:'development',
    entry:path.join(__dirname,'./src/index1.js'),//打包入口修改为src目录下的index1.js
    output:{
        path:path.join(__dirname,'./output/'),
        filename:'bundle.js'                     //输出出口修改为output目录下的bundle.js
    },
    plugins:[htmlPlugin],       //引用插件
    devServer:{
        open:true,              //初次打包完成后，自动打开浏览器
        host:'127.0.0.1'        //指定打包后的项目访问地址，默认localhost
        port:80,                //指定打包后的项目访问端口号,默认8080
    },
    module:{
        rules:[                    
            {test:/\.css$/,use:['style-loader','css-loader']},//use数组中，从右往左调用
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.jpg|png|gif$/,use:'url-loader?limit=1000'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//排除该目录下的js文件
        ]
    }
}

        新建babel.config.js，配置项如下：

module.exports = {
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

发布-配置build命令

        配置：在package.json 的scripts节点下，增加build脚本：

"scripts": {
    "dev": "webpack serve",
    //--mode是一个参数项，指定webpack的运行模式
    //指定后，会覆盖webpack.config.js中mode选项
    "build": "webpack --mode production",
}

        运行：cnpm run build，生成的文件夹即为发布项目文件夹

发布-优化发布后的js路径

        在webpack.config.js文件的output节点中修改为：

	output:{
		path:path.join(__dirname,'./dist/'),
		filename:'js/bundle.js'    //添加js路径前缀
	},

        重新运行cnpm run build即可

发布-优化发布后的图片路径

        在webpack.config.js文件的图片加载器配置项中，修改如下：

{
    test:/\.jpg|png|gif$/,
    use:{
        loader:'url-loader',
        options:{
            limit:90000,
            outputPath:'images'
        }
    }
}
//-------------------或者-------------------

{test:/\.jpg|png|gif$/,use:'url-loader?limit=90000&outputPath=images'},

        重新运行cnpm run build即可

发布-插件clean-webpack-plugin

        作用：为了在每次打包发布时自动清理掉dist目录下的旧文件

        安装：cnpm i clean-webpack-plugin -D

        配置：在webpack.config.js文件中配置如下：

...
...
//左侧的{}是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    ...
    ...
    plugins:[htmlPlugin,new CleanWebpackPlugin()]    //增加插件引用
}

Source Map介绍

        Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。

开发阶段默认的Source Map

        开发环境下默认生成的SourceMap，暴露的是生成后代码的报错位置和内容，会导致和源代码的行数不一致的问题。

开发阶段建议的Source Map：eval-source-map

        在webpack.config.js文件中增加以下配置项可定位源码报错位置和源码内容：

module.exports = {
    mode:'development',
    devtool:'eval-source-map'
}

发布阶段的Source Map建议：省略devtool选项的配置

        在生产环境下，建议省略devtool选项的配置，这样暴露的是生成代码报错位置和内容，防止原始代码暴露给外人

发布阶段的Source Map建议：nosources-source-map

        在生产环境下，只想定位源码行数又不想暴露源码，可更改devtool选项如下：

module.exports = {
    mode:'development',
    devtool:'nosources-source-map'
}

发布阶段的Source Map不建议：source-map

         在生产环境下，既定位源码报错行数又暴露源码内容，严禁使用

module.exports = {
    mode:'development',
    devtool:'source-map'
}

webpack中@的使用

        在js文件中导入其他资源时可能涉及不同层级目录下的文件，一般使用./，../ 等去引用。为了方便我们可以使用@来代表src目录，如当src/js/test/test.js去引用src/index.js时，可以这么写：import content from '@/index.js'。

        但在使用前需要在webpack.config.js中进行如下配置：

module.exports = {
    ...
    resolve:{
        alias:{
            '@':path.join(__dirname,'./src/')
        }
    }
    ...
}