webpack基础学习

使用webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
将各种类型资源打包编译为最基础的html、js、css、img等

安装
npm init -y 创建npm项目
npm install webpack webpack-cli --save-dev 安装webpack以及脚手架

配置文件

package.json同级目录新建webpack.config.js

1. 基本配置入口：entry，出口：output：filename，path，clean:true
2. 解析路径 resolve；配置 和导入
3. 资源加载 webpack默认只能加载js和json资源；其他资源类型（img/css/vue/json/csv/xml/less）需要安装加载器loader，
4. 插件 HtmlWebpackPlugin:html5自动生成并引入bundle包；MiniCssExtractPlugin:将css从js中剥离减少js文件大小;CssMinimizerWebpackPlugin:将css压缩 ;TerserWebpackPlugin:webpack5 自带不需要安装

使用webpack搭建vue脚手架

1. 新建文件夹 webpack-vue
2. 初始化npm项目 npm init -y
3. 安装webpack工具 npm install webpack webpack-cli --save-dev
4. 安装devServer npm install --save-dev webpack-dev-server
5. 添加运行指令 “build”: “webpack --mode production” “serve”: “webpack serve --mode development”
6. 根目录新建入口文件 src/main.js
7. wepack配置文件 webpack.config.js
8. 新建html页面加载bundle dist/index.html
9. 安装vue npm install vue
10. 加载vue文件 main.js App.vue 安装 修改配置 加载less与css
11. vue-router使用 安装 npm install vue-router 页面修改 App.vue 新建/src/router/index.js
12. 在根目录新建public/index.html 安装npm install --save-dev html-webpack-plugin

配置const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:“./public/index.html”
})
]