Vue笔记16_webpack简单打包

认识webpack：模块，打包。

使用vscode终端遇到的问题：

解决方法：

然后：

成功~
创建文件夹解析：
dis文件夹：存放打包后的文件
src文件夹：存放我们写的源文件
– main.js：项目入口文件
– math.js：定义一些数学函数，可以在其他地方引用，并且使用。
index.html：浏览器打开展示的网页

!--------------------------------------------分割线
使用webpack.config.js文件：

动态绑定入口（src里面main.js）与出口（dis里面的bundle.js）的绝对地址

const path=require('path')
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dis'),
        filename:'bundle.js'
    },
}

分割线-----------------------------

本地配置webpack（局部打包）：

一直回车…之后…
自动生成一个文件如下：

直接在终端输入webpack可以直接打包，也可以用
npm run build

分割线----------------------------------------------------------

需要在终端安装css-loader和styler-loader。
指令：


webpack.config.js文件中：

分割线---------------------------------
使用less：
安装指令：

webpack.config.js文件中：（配置）

分割线----------------------------
图片文件配置：