【通过webpack自己搭建项目】

一，webpack是什么

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
vue2 底层打包工具用的就是webpack
通过webpack让浏览器支持ES6,node抛出，引入的写法
webpack可以跨端运行（服务端运行，也可以在浏览器端运行）

web快速入门

1. 创建package.json文件 — 创建一个空文件夹后在终端通过npm init自动创建

2. 安装webpack相关依赖 — npm i webpack webpack-cli -D

此时我们可以先测试一下，创建相关测试文件进行测试

创建webpack.config.js文件

//暂时配置以下内容
module.exports = {
  entry: "./index.js", //入口文件路径
}

运行 npm run serve
自动生成dist文件，此时我们创建html文件，把dist内的js文件引入

页面已执行我们的js文件中的函数

现在我们再来试一试引入 图片，css，scss试试吧

webpack具体使用

先创建对应的文件以及样式

引入并处理数据

webpack.config.js文件配置

const path = require("path");
module.exports = {
  entry: "./src/index.js", //入口文件路径
  module: {
    rules: [
      //loader 能够去处理其他类型的文件，
      //并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
      //test 属性，识别出哪些文件会被转换。
      //use 属性，定义出在进行转换时，应该使用哪个 loader。
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.s[ac]ss/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      { test: /\.(jpg|jpeg|png|svg|gif)$/i, type: "asset/resource" },
      // type：指定的类型
      //asset/resource  :  发送一个单独的文件并导出URL
      // asset/inline    :生成base64图片
    ],
  },
};

npm run serve打包一下
此时的页面效果css scss img 效果都生效啦

现在我们又想打包的文件中也包含html文件，此刻可以借助
HtmlWebpackPlugin插件 通过npm i html-webpack-plugin -D安装

成功打包

嗯·····，现在又想使用web服务，实现
为静态文件提供服务
自动刷新和热替换 的功能
那就使用npm i webpack-dev-server -D安装

 devServer: { //
    //配置服务器运行目录
    static: {
      directory: "dist",
    },
    //配置启动端口号
    port: 9000,
    // hot:true
  },

注意，还需要配置模式呦

mode: “development”,
再配置运行脚本

"scripts": {
    "dev":"webpack serve --open"  //加上--open 会自动打开浏览器
  },

现在完善一下我们webpack.config.js文件的配置

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: "./src/main.js", //入口文件路径
  mode:"development",
  output: {
    //打包后的文件路径
    path: path.resolve(__dirname, "dist"), //文件夹名称
    filename: "js/like.js", //文件名称及位置
    clean: true, //清理打包无用的文件
    assetModuleFilename: "imgs/[name][hash][ext]", //指定静态资源打包后的目录
  },
  module: {
    rules: [
      //loader 能够去处理其他类型的文件，
      //并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
      //test 属性，识别出哪些文件会被转换。
      //use 属性，定义出在进行转换时，应该使用哪个 loader。
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.s[ac]ss/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      { test: /\.(jpg|jpeg|png|svg|gif)$/i, type: "asset/resource" },
      // type：指定的类型
      //asset/resource  :  发送一个单独的文件并导出URL
      // asset/inline    :生成base64图片
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    minify: false,
    //指定模板源
    template: './public/index.html',
    //打包生成的html文件名
    filename:'index.html'
  })],
  devServer: {
    //配置服务器运行目录
    static: {
        directory:'dist'
    },
    //配置启动端口号
    port: 9000,
   // hot:true
}
};

piblic中的index页面 scr进入的js文件现在删除的，因为我们的webpack.config.js文件已经作为入口文件引入过也设置模板源了会自动注入了。-----现在我们的项目已经可以使用样式，图片等等并可打包，也可以使用web服务啦

搭建一个webpack与vue2开发环境

以上边的文件为基础
第一步：需要安装4个依赖:

"devDependencies": {
	"vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14", //解决模板
 }  
   
  "dependencies": {
    "vue": "^2.6.14",
    "vue-router": "^3.5.4"
  }

注意版本

vue-loader的作用：

• 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
• 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
• 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理；
• 为每个组件模拟出 scoped CSS；
• 在开发过程中使用热重载来保持状态

第二步：配置vue-loader

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入vue-loader插件
const {VueLoaderPlugin} =require('vue-loader')
module.exports = {
  entry: "./src/main.js", //入口文件路径
  mode:"development",
  output: {
    //打包后的文件路径
    path: path.resolve(__dirname, "dist"), //文件夹名称
    filename: "js/like.js", //文件名称及位置
    clean: true, //清理打包无用的文件
    assetModuleFilename: "imgs/[name][hash][ext]", //指定静态资源打包后的目录
  },
  module: {
    rules: [
      //loader 能够去处理其他类型的文件，
      //并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
      //test 属性，识别出哪些文件会被转换。
      //use 属性，定义出在进行转换时，应该使用哪个 loader。
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.s[ac]ss/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      { test: /\.(jpg|jpeg|png|svg|gif)$/i, type: "asset/resource" },
      // type：指定的类型
      //asset/resource  :  发送一个单独的文件并导出URL
      // asset/inline    :生成base64图片
      //配置vue-loader
      {test:/\.vue$/i,use:['vue-loader']}
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    minify: false,
    //指定模板源
    template: './public/index.html',
    //打包生成的html文件名
    filename:'index.html'
  }),
  new VueLoaderPlugin()],
  devServer: {
    //配置服务器运行目录
    static: {
        directory:'dist'
    },
    //配置启动端口号
    port: 9000,
   // hot:true
}
};

启动


就能实现页面之间的跳转，vue2大致配置完成

vue3集成

删除vue-template-compiler
升级vue-loader到16+版本
“dependencies”: {
“vue”: “^3.2.36”,
“vue-router”: “^4.0.15”, //升级
“vuex”: “^4.0.2”
}

之后vue2页面语法改为vue3语法即可

总结

1. webpack是干嘛的
   是一个款模块化静态打包工具
2. webpack包括几大核心
   1. 入口：entry,入口文件
   2. 出口：output:打包出口文件
   3. loader：进行资源转换的，目的能让webpack识别那些不能识别的资源
   4. 插件：增强webpack功能 例如：自动生成html文件，vue插件
   5. 模式：打包时是用production(压缩)模式还是development(压缩)模式
   6. 服务器环境:webpack-dev-server