webpack 打包

webpack

•  前端静态模块化打包器
•  把所有文件 经过 webpack 处理,生成 html,css,图片,js

打包工具

webpack依赖webpack.config.js打包

入口：   entry
输出：   output
path:__dirname+"/dist"       (__dirname当前目录)
文件名称：       filename

 模式：mode

开发模式：      development
产品模式：      production 

 加载器：          loader

• 处理非js文件

• module:{
     rules:[
        {"test":/\.css/,loader:["style-loader","css-loader"]}
    ]
  }

• style-loader 把css加载到style标签
• css-loader 处理.css文件

 插件：plugins

   在webpack运行过程做打包,压缩,清理
使用：

01 安装

npm i html-webpack-plugin

02 导入

const HtmlWebpackPlugin = require("html-webpack-plugin")

03 使用

plugins:[
   new HtmlWebpackPlugin({template:"./public/index.html"})
]

 html-webpack-plugin         把模板html 插件打包好的js 拷贝到 dist目录

 路径别名

resolve:{
        alias:{
            // 指定@代表当前目录下的src目录
            "@":path.resolve(__dirname,"./src")
        }
    }

 devServer  本地服务器 

    

  devSever:{
   host:"域名",
   port:"8080",
  hot:"热更新",
  open:"是否自动打开浏览器",
  proxy:{},//代理
}

  package.json
"script":{
    "serve":"webpack serve"
}

   npm  run serve

 创建vue的环境

不用vue的脚手架你能vue的项目运行环境  vite可以
自己写webpack实现vue的脚手架功能
需要的插件与loader

vue-loader 加载vue
vue-template-compiler 编译vue模板
vue-hot-reload-api vue的热更新
vue-style-loader 处理vue的css
css-loader file-loader url-loader

配置

const {VueLoaderPlugin} =  require("vue-loader");
entry:'./src/main.js',
{test:/\.vue/,use:["vue-loader"]},  
new VueLoaderPlugin()