【webpack在vue中的使用以及安装包】

webpack

Webpack 是目前最热门的前端资源模块化管理和打包工具，还是先通过一张图大致了解它 的运行方式!!

安装

安装之前进行项目初始化生成 package.json 文件

npm init -y 
npm init 

安装 webpack 和 webpack-cli

npm i webpack webpack-cli --dev

配置[命令行]

在package.json文件的scripts字段中配置启动命令

"scripts":{
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
}

创建入口文件

1. webpack 默认的入口文件是 src 目录下的 index.js;
2. 需要在项目的根目录下创建src文件夹，在里边创建 index.js 文件作为入口文件

3. webpack的配置文件

如果要对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js； 该文件是一个模块

module.exports = {
   
		    ...
		}

webpack的入口和出口

1. 单一入口和出口

  		//  单一入口和出口
  		const path = require('path')
  		module.exports = {
   
  		    entry:'index.js',
  		    output:{
   
  		        //  设值出口文件存放的目录
  		        path:path.resolve(__dirname, "dist"),
  		        //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
  		        filename:'[name].js'
  		    }
  		}

在配置过程中，vscode没有提示，可以这样做

>let {
   Configuration}=require('webpack')
>
>/**
> * @type {Configuration}
> */
>const config= {
   
>  entry: './src/index.js',
>  output: {
   
>    filename: 'bundle.js'
>  }
>}
>module.exports=config;

2. 多入口文件和单一出口

		//  多入口文件和单一出口
		const path = require('path')
		module.exports = {
   
		    entry:['index.js', 'main.js',...],
		    output:{
   
		        //  设值出口文件存放的