Vue 08 下

Vue 08

常用配置

配置自动生成网页模板

安装依赖包

# webpack4
html-webpack-plugin@4 -D
# webpack5
npm install html-webpack-plugin -D

导入

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

插件配置

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

总结：
1.根据index.html页面模板生成一个打包的index.html并且自动添加js文件的引入
2.插件使用；先安装，在导入，最后配置插件

配置本地服务器

安装依赖包

npm install webpack-dev-server -D

webpack配置文件

devServer: {
    // 调试网站的跟路径
    contentBase: path.join(__dirname, 'dist'),
    // 本地服务的端口
    port: 9000
}

基本启动方式

npx webpack serve --config webpack.config.dev.js

package.json 文件配置

package.json 文件配置
1.给运行的命令起一个别名，方便运行命令是简化操作
2.dev表示开发调试
3.bulid表示打包上线

"scripts": {
  "serve": "npx webpack serve --config webpack.config.dev.js",
  "build": "npx webpack --config webpack.config.dev.js"
},

总结：
1.开发阶段运行npx webpack serve --config webpack.config.dev.js(如果自定义配置文件名称，必须添加–config选项并指定文件名称)
2.可以在package.json文件中，配置命令的别名
1）开发运行的命令 npm run serve
2)打包上线的命令 npm run build

配置less加载器

安装依赖包

npm install less-loader less -D

配置less加载器

{
  // 处理less文件
  test: /\.less$/,
  // loader处理流程：从右向左
  // less-loader作用：把less文件代码编译为css代码
  use: ['style-loader', 'css-loader', 'less-loader']
}

总结：
1.less加载器需要两个依赖包（less-loader内部依赖less）
2.比css处理流程多一个加载器less-loader

配置图片加载器

file-loader 将图片移动到dist目录（或者outputPath定义的目录）下并返回一个相对于dist的路径
url-loader默认使用file-loader移动图书文件，但是多了一个功能：如果图片文件的大小很小，那么图片转换为base64格式的图片

安装依赖包

npm install url-loader file-loader -D

webpack配置文件：配置图片加载器

{
    // 匹配各种类型的图片资源
    test:/\.(png|jpg|gif|jpeg|svg)$/,
    use:[
      {
        // 依赖的loader（url-loader内部依赖的file-loader）
        loader: "url-loader",
        // 加载器的配置选项
        options: {
          // 图片文件名称的生成规则（重命名图片的文件名称）
          // name表示图片的原始名称
          // hash:5表示随机生成一个5位的字符串拼接到文件名称后面
          // ext表示图片的后缀
          // logo.473ab.png
          name: "[name].[hash:5].[ext]",
          // 如果图片的大小小于1k，就转化为base64格式图片
          // 推荐小图片转换base64
          limit: 5 * 1024, // size <= 5k
          // 图片生成后放置的目录名称
          outputPath: "imgs"
        }
      }
    ]
 }

图片可以转换为base64形式的数据

1.base64编码会使图片体积变大（缺点）
2.所以一般我们把小图片转为base64，但是大图片不建议转换
3.好处是减少网页的请求次数，提高加载效率

总结：
1.file-loader负责移动图片
2.ul-loader内部基于file-loader移动图片，但是可以转换图片为base64格式的数据
3.关于base64格式的图片优缺点

配置js加载器

Babel 是一个 JavaScript 编译器，能将 ES6 语法转为 ES5 语法，让你使用最新的语言特性而不用担心兼容性问题，把采用ES6 编写的代码转换成目前已经支持良好的 ES5 代码。

安装依赖包

1.babel-loader是webpack需要的包（加载器）
2.@babel/core 是babel的核心包，提供转换操作
3.@babel/preset-env是转换的规则（那些ES6的语法需要做转换）

npm i babel-loader @babel/core @babel/preset-env -D

webpack配置文件：配置js加载器

{
  test: /\.js$/,
  loader: 'babel-loader',
  //打包除这个文件之外的文件
  exclude: path.join(__dirname, './node_modules')
}

babel配置文件（.babel）在项目根目录创建文件

用于设置babel的转换规则

{
  "presets": ["@babel/preset-env"]
}

总结：
1.ES6+语法需要经过Babel的编译，才可以在早期的浏览器中运行
2.webpack依赖babel-loader，babel-loader依赖@babel/core，@babel/core依赖@babel/preset-env

配置Vue加载器

安装依赖包

npm install vue-loader vue-template-compiler -D
npm install vue -S

webpack配置文件：配置Vue加载器

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

配置Vue插件

// 导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 配置插件
plugins: [
  new VueLoaderPlugin()
]

总结：
1.支持Vue单文件组件开发
2.配置Vue单文佳加载器，并且需要配置插件

webpack项目发布

关于打包模式

1.development开发模式打包 打包速度快 没有优化处理
2.production生产模式打包 打包速度慢 做了优化处理，压缩

// 导出的是给webpack使用的配置
module.exports = {
  mode: 'development'
} 

命令配置

1.Dev命令表示开发阶段
npx webpack-dev-server
npx webpack serve
–open的作用：自动打开浏览器
2.build命令表示上线阶段

"scripts": {
    "dev": "npx webpack-dev-server --open",
    "dev1": "npx webpack serve --open"
    "build": "npx webpack --config webpack.config.js"
},

总结：通过package.json配置开发和打包命令的别名