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包，使用包中的join函数拼接出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

npm install webpack-dev-server

2. 配置devServer

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

注意：低版本配置与高版本配置信息有所不同，用时请注意

$日期：2021-10-21$

七、webpack配置分离

1. 安装webpack-merge模块

npm install webpack-merge

2. 创建js配置文件文件

1. base.config.js
2. dev.config.js
3. prod.config.js

3. 配置文件内容配置

1. base.config.js
   基础配置,将公共的配置内容放到基础配置中,配置方式与之前一样

module.exports = {
	// 基础配置
}

2. dev.config.js

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js')
module.exports = webpackMerge(baseConfig, {
	// 开发配置	
})

3. prod.config.js

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js')
module.exports = webpackMerge(baseConfig, {
	// 生产配置	
})

$日期：2021-10-25$

八. 配置别名

1. 配置

给某一目录配置别名

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

2. 使用

• js代码中使用时,如使用import导入组件时,直接使用目录别名即可

  import Home from '@/views/home/Home'

• html和css代码中使用时,如img引入图片时,需要使用~作为前缀

  <img src="~@/assets/img/home/home.png">

$日期：2021-11-17$