webpack的配置及使用

1.安装

在本地文件夹安装webpack：

【1】npm init -y初始化package.json文件

【2】npm i webpack webpack-cli -D安装在开发依赖

【3】使用webpack命令：在package.json中的scripts中添加运行webpack命令：“build”：“webpack”

【4】在编辑器终端运行命令即可进行打包：npm run build

【5】如果项目需要一些额外配置，则新建文件webpack.config.js ，在文件中进行配置要导出此文件（使用commonjs导出模块）

2.webpack基本配置

mode:打包模式

development模式：不压缩，体积大，打包速度快；
production模式：压缩代码，体积小，打包速度慢

入口文件/出口文件：

默认入口：src中index.js（entry:url）
默认出口：dist中main.js(output:{path:..., filename:...})
path必须是绝对路径

以上为默认打包的js模块的配置，也可以不配置，自动会进行配置

3.打包其他资源的配置

【打包css】

[1]安装加载器：npm install --save-dev style-loader css-loader(去官网查命令)[2]在入口文件中导入打包文件: import  'xxx'[3]在配置文件中配置css加载器：在module中配置规则

module:{
 rules:[
  {
    test:/匹配文件后缀名/，
    use：[
//使用的加载器
'style-loader',
'css-loader'
    ]
  }
]
}
//test中写的是文件后缀名

【打包less】

[1] 安装less加载器与css加载器（less包和less-loader包）：npm install --save-dev less less-loader

[2] 在入口文件中导入打包文件: import 'xxx'

[3] 在配置文件中写配置规则，注意要加载less,首先加载css的style加载器，和css加载器，因为less要先转为css文件，在进行压缩为js文件打包

【打包图片】

[1] 安装加载器：npm install --save-dev file-loader

[2] 在入口文件中导入打包文件index.js[3] 在配置文件中配置加载规则

【打包字体文件】

[1]安装加载器：此处不用安装包，和打包图片文件共用一个加载器

[2]在入口文件导入打包文件

[3]在配置文件中配置对应的加载规则

【打包html】

[1]安装插件：npm install --save-dev html-webpack-plugin

[2]在配置文件中导入插件包：const HtmlWebpackPlugin=require（‘html-webpack-plugin’）

[3]在配置文件中使用插件：

【清理dist目录中无用的文件】

[1]安装依赖：npm install clean-webpack-plugin --save-dev[2]在配置文件中导入模块：const { CleanWebpackPlugin } = require（'clean-webpack-plugin’）[3]在配置文件中配置使用插件:

plugin：[
 //初始化插件
 new CleanWebpackPlugin()
]
//【注：打包过程中如果有什么问题，要参照英文文档】

【babel使用，语法降级】

【注意】只能转语法，不能转高阶函数

[1]安装依赖：npm install -D babel-loader @babel/core @babel/preset-env

[2]在配置文件中配置规则，官网中有配置规则

转高阶函数：

[1]安装依赖：npm install --save @babel/polyfill

[2]【优先】导入模块，放在最上面：

在index.js入口文件中优先导入：import "@babel/polyfill"

【sourcemap配置】追踪错误位置

在配置文件中：devtool:'inline-source-map'

【使用观察模式】监听文件变化，自动打包

[1] 在package.json的script中：“watch”：“webpack --watch”

[2] 运行命令：npm run watch

【使用dev-server】实时更新页面（自动刷新）

[1] 安装依赖：npm install --save-dev webpack-dev-server

[2] 在配置文件中进行配置：devServer：{contentBase:'./dist'}

[3] 添加执行命令：“server”：“webpack-dev-server --open”

【热更新】不刷新浏览器，但可以刷新结果

[1]  在配置文件中导入依赖：const webpack = require（‘webpack’）

[2] 在配置文件中进行配置：devServer：{contentBase:'./dist'，hot :true}

[3] 使用webpack自带插件：在配置文件中配置使用插件:

plugin：[
 new webpack.HotModuleReplacementPlugin()
]

【打包vue】

vue团队提供，vue生态系统中查看vue-loader

[1] 安装依赖：npm install -D vue-loader vue-template-compiler

[2] 在配置文件导入插件：const VueloaderPlugin = require(vue-loader/lib/plugin)

[3] 在配置文件中配置规则

[4] 在配置文件中使用插件

plugin：[
  new VueloaderPlugin()
]

【路径别名，后缀名使用】(由webpack提供)

在配置文件中配置：

//解析文件路径相关配置
resolve：{
 //使用@表示当前路径文件别名
 alias：{
  '@':path.join(_dirname,'./src')
}，
 //省略后缀
 extensions：['.js','.vue','.json','.css']

}
//【注：若修改了配置文件，要重启服务器】

4.解决首屏加载慢问题

原因：在显示页面时，会获取所有的资源，打包后的文件会很大（chunk-vendors是第三方包代码合并在一起，app.js是自己写的代码合并在一起）

解决方案：按需加载（使用路由懒加载）

(异步的+代码分割好的)即：把不同的路由对应的组件进行分割成不同的代码块，访问时加载对应的组件就比较高效=====》定一个webpack自动代码分割异步组件const Foo =()=>import('./Foo.vue')在进行打包---打包后分割为多个文件，稍微减小了文件的体积

5.打包优化

体积较大的第三方文件使用cdn加载，

[1] 在index.html中引入使用echarts的cdn外链资源引入

[2] 使用cdn之后，将项目中的包删除

方法一：注释代码：import echarts from 'echarts'

方法二：使用配置进行忽略一些文件，新建vue.config.js，在该文件中配置文件添加配置：

module.exports = {
 //vue cli 的配置，可实现webpack的配置，但没有完全实现webpack的所有配  
 configwebpack:{
  externals:{echarts:'echarts'}
}
}

6.导入导出模块

es6模块导出：export和export default      

             导入：import xxx from yyy 、import {xxx} from yyy

//导出export和export default之间的区别:
//export与export default都可以导出常量、函数、文件、模块等。
//在文件或模块中,export default有且仅有一个,export可以有多个。
//export可以直接导出变量表达式,export default不行。
//通过export方式导出时,导入需要加{},export default则不用。

commonjs导出：module.exports = {}

                 导入：变量名 = require（模块名）

//exports = module.exports = {}
//exports和module.exports都会指向一个{}内存区域