# webpack-template

**Repository Path**: yyuxia/webpack-template

## Basic Information

- **Project Name**: webpack-template
- **Description**: 这是一个webpack的普通模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-03
- **Last Updated**: 2024-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 全局安装

 + npm i webpack -g  [ npm i webpack@4.x.x webpack-cli]
## 将文件打包
 +  webpack .\src\main.js -o .\dist\bundle.js [ npm install  webpack-cli]

## 当main.js改变时，需要重新打包
 + 配置webpack.config.js 的入口和出口文件 使用 webpack 打包
 + 使用 webpack-dev-server 来实现自动打包编译
  1、运行 cnpm i webpack-dev-server -D 
  2、安装完毕后，用法和webpack一致，
  3、由于我们是在本地安装的webpack-dev-server 所以无法直接在终端中执行
  解决：在package.json 中 的scripts中配置 "dev":"webpack-dev-server"
  4、webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘中，而是，直接托管到了 电脑的内存中，所以，我们在项目的根目录中根本找不到bundle.js
  5、我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到咱们的根目录中，虽然我们看不到它，但是，可以认为，和dist src node_module 平级，有一个看不见的文件，叫做bundle.js。
  6、再次配置 "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot --host 10.30.163.217"
  --hot 热重载 网页不重新刷新，只重新打包修改的部分文件
## 将页面也放到内存中
 + cnpm i html-webpack-plugin -D
 + 配置webpack.config.js

## 导入css样式表
 + import './css/index.css'
 + 安装 loader ：npm i style-loader css-loader -
 + 配置webpack.config.js `{test:/\.css$/,use:['style-loader','css-loader']},`
## 导入less
 + 安装 npm i less-loader less -d
 + { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }, 
## 导入scss
 + npm i sass sass-loader -D [cnpm i sass -D]

## 图片地址处理 
 + npm i url-loader file-loader -D
 + {test: /\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=74286&name=[hash:8]-[name].[ext]'},
## 字体图标处理
 + {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}


 ## es6以上的高级语法处理
  + 



## 
 + npm install babel-loader @babel/core --save-dev
 + npm install @babel/preset-env --save-dev   npm install @babel/polyfill --save-dev
 +  npm i  @babel/plugin-proposal-class-properties -D
 + 配置webpack.config.js 
    +  {test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader'}}
  + 配置.babelrc.json
    + {
        "presets": ["@babel/preset-env"],
        "plugins": ["@babel/plugin-proposal-class-properties"]
      }

## 默认无法打包.vue文件 安装loader
 +  npm i vue-loader@14 vue-template-compiler -D   14版本不需要安装插件
 + {test:/\.vue$/,use:"vue-loader"}

## vue路由组件
 + npm i vue-router -S