vue之webpack

一、介绍：

　　1. js应用的模块打包工具

二、webpack安装

　　1. 环境：node环境

　　2.  npm install webpack -g 

　　　　说明：npm install 命令；webpack是工具名，可以指定版本如：webpack@5.58.3； -g表示全局安装，如果不想全局安装，仅为某项目安装开发时依赖，可以在进入该项目目录下执行安装命令， 将-g改为--save-dev；--save表示为本项目安装；-dev表示开发时依赖，运行时不需要使用时可以添加此option

　　　　整体案例：npm install webpack@3.6.0 --save-dev

　　3.  webpack --version 

　　　　说明：查看webpack安装版本，正确显示说明安装成功。注意：高版本webpack查看版本时会让安装webpack脚手架（webpack-cli）

　　4.  npm uninstall webpack -g 

　　　　说明：移除webpack工具

三、webpack打包

　　1. webpack 入口js文件 打包后的js文件名

　　　　说明：webpack是打包命令；入口文件是项目的入口，如main.js；打包后的文件名是打包成功后输出生成的文件名，如bundle.js

　　　　整体案例： webpack ./src/main.js ./dist/bundle.js 

　　　　注意：高版本需要添加-o作为option然后跟输出目录，生成的文件名为main.js;

　　　　如：在5.58.3版本时，执行命令 webpack ./src/main.js -o ./dist/bundle.js ，会在dist目录下生成bundle.js目录，在bundle.js目录中生成main.js文件

　　2. webpack

　　　　说明：在webpack进行文件配置之后，可以直接使用webpack打包，webpack会从配置中查找入口文件和出口文件进行打包；文件名称：webpack.config.js

　　　　　　配置方式：

module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        // path必须为绝对路径
        path: absolutePath,
        filename: 'bundle.js'　　　　　　　　
    }
} 

　　　　　　绝对路径相对化：在项目目录下执行npm init命令会生成package.json文件，此时在webpack.config.js配置文件中导入path模块，此时就会从package.json或者全局中查找path包，使用包中的resolve函数拼接出path

　　　　　　导入模块： const path = require('path') 

　　　　　　拼接绝对路径： path.join(__dirname, 'dist') 

　　　　　　　　其中 __ditname是node中获取的当前项目的文件夹绝对路径

　　3.  npm run *** 

　　　　说明：npm run 命令可以用来执行脚本命令，在配置好映射之后便可以使用

　　　　　　建立webpack打包映射：在package.json文件中的scripts中添加命令映射：如 "build":"webpack"

　　　　　　在建立好上述映射之后，就可以使用npm run build进行打包构建，执行的就是webpack命令，使用的是配置信息

　　　　此种打包方式会优先使用本地安装的webpack

四、webpack的loader

　　1. loader安装

　　　　通过npm安装需要使用的loader；

　　2. loader配置

　　　　在webpack.confi.js中的module关键字下进行配置（去官网查找相关loader和用法。webpack.js.org）

　　3. 整体案例：一：  npm install css-loader --save-dev; npm install style-loader --save-dev; 

　　　　　　　　二：

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

 

日期：2021-10-20

 

五、webpack的plugin

　　1. 安装相关模块

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

　　2. 导入相关模块

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

　　3. 添加到webpack.config.js配置文件中

module.exports = {
    // ...
    plugins: [
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template: 'index.html'
        }),
        new webpack.BannerPlugin('版权插件'),
        new uglifyJsPlugin()
    ],
}

 

六、开发服务配置

　　1. 安装webpack-dev-server

　　2. 配置devServer

module.exports = {
    // ...
    devServer: {
        // 服务的目录
        static: [
            {
                directory: path.join(__dirname, 'dist')
            },
        ],
        // 实时文件
        watchFiles: {
            paths: ['dist/**/*']
        },
        // 指定端口
        port: 8081,
        // 首次启动时打开浏览器
        open: true,
    }
}

 

 

日期：2021-10-21