webpack基础教程

webpack官方地址

webpack 是一款帮助我们打包的工具,下面直接上干货

1 创建一个文件夹,并且初始化改文件夹,初始化之后会加粗样式自动生成一个package.json文件

	npm init -y
	使用npm init -y命令

2 安装webpack

	yarn add webpack  webpack-cli -D

3 创建文件夹

• 创建index.html 引入mian.js
• 创建src 文件夹
• src 文件夹下创建app.vue , main.js
• 安装vue yarn add vue
• 在main.js中 挂载vue实例 如下图
  
  

4 根目录下创建webpack.config.js
在此之前我们需要安装一些模块 因为游览器并不识别我们.vue .css .png 的格式
vue-loader是专门打包vue文件的

	yarn add	 vue-loader  vue-template-compiler -D

5 在package.json 添加webpack 启动目录

6 想要实现图片 .css 样式我们还需要使用其他模块
less scss格式的文件同样如此添加

	yarn  add style-loader  css-loader  file-loader -D 

7 运行 yarn build 在index.html 中引入bundle.js 并在游览器中打开

8 plugins 插件

	yarn add  html-webpack-plugin  clean-webpack-plugin -D

9 webpack-dev-server 实现自动启动 更改端口号,实时更新

在第二步的时候安装了webpack-cli   更改为4以下的版本
yarn add webpack-cli@3 -D
yarn add webpack-dev-serve -D

在package.json 中添加 “start”: “webpack-dev-server”

在webpack.config.js中添加devServer

运行 yarn start

10 处理跨域

整个大体已经完成,下面就是用一些插件 使得项目更加完善

在根目录下创建两个webpack.dev.js 和 webpack.prod.js 文件

// 生产环境 去掉 热模块配置 删除掉webpack.prod.js

const path = require("path");
//vue-loader是专门打包vue文件的 需要手动安装  yarn add vue-loader vue-template-compiler -D
//vue-loader 依赖于 css-loader 也要手动安装一下css-loader   yarn add css-loader -D
const VueLoaderPlugin = require("vue-loader/lib/plugin");
//自动生成html文件的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//帮助我们在打包前自动删除掉dist文件夹的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 配置webpack
module.exports = {
  // 打包模式 production||development
  mode: "production",
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    filename: "bundle.js", //生成文件名
    //path是Node中的路径模块,在Node中，__dirname总是指向被执行js文件的绝对路径
    path: path.resolve(__dirname, "dist"), //打包的路径
  },
  //打包的规则
  module: {
    rules: [
      {
        test: /\.vue$/, //匹配以vue结尾的文件
        loader: "vue-loader", //使用vue-loader完成打包
      },
      // {
      //   test: /\.(jpg|jpeg|png|svg)$/, //匹配图片格式的文件
      //   loader: "file-loader", //使用file-loader完成打包
      //   options: {
      //     name: "[name].[ext]", //使用源文件的名称和后缀去生成打包文件
      //   },
      // },
      {
        test: /\.(jpg|jpeg|png|svg)$/, //匹配图片格式的文件
        loader: "url-loader", //使用file-loader完成打包
        options: {
          name: "[name].[ext]", //使用源文件的名称和后缀去生成打包文件
          limit: 4096,
        },
      },
      {
        test: /\.css$/, //匹配css格式的文件
        use: ["style-loader", "css-loader"], //使用style-laoder和css-loader完成打包
      },
      {
        test: /\.styl(us)?$/, //匹配stylus格式的文件
        use: [
          "vue-style-loader",
          "css-loader",
          "postcss-loader",
          "stylus-loader",
        ],
      },
    ],
  },
  // 插件配置
  plugins: [
    new VueLoaderPlugin(), //实例化vue-loader插件
    new HtmlWebpackPlugin({
      template: "./index.html", //以根目录下的index.html为模板生成html文件
    }), //html-webpack-plugin插件
    new CleanWebpackPlugin(),
  ],
  resolve: {
    alias: {
      //别名配置 遇到import vue from 'vue' 此时导入的vue文件就是vue/dist/vue.js
      vue: "vue/dist/vue.js",
    },
  },
};

//webpack.dev.js

const path = require("path");
//vue-loader是专门打包vue文件的 需要手动安装  yarn add vue-loader vue-template-compiler -D
//vue-loader 依赖于 css-loader 也要手动安装一下css-loader   yarn add css-loader -D
const VueLoaderPlugin = require("vue-loader/lib/plugin");
//自动生成html文件的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//帮助我们在打包前自动删除掉dist文件夹的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");
// 配置webpack
module.exports = {
  // 打包模式 production||development
  mode: "development",
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    filename: "bundle.js", //生成文件名
    //path是Node中的路径模块,在Node中，__dirname总是指向被执行js文件的绝对路径
    path: path.resolve(__dirname, "dist"), //打包的路径
  },
  target: "web",
  // devServer配置
  devServer: {
    contentBase: "./dist",
    open: true,
    hot: true,
  },
  //打包的规则
  module: {
    rules: [
      {
        test: /\.vue$/, //匹配以vue结尾的文件
        loader: "vue-loader", //使用vue-loader完成打包
      },
      // {
      //   test: /\.(jpg|jpeg|png|svg)$/, //匹配图片格式的文件
      //   loader: "file-loader", //使用file-loader完成打包
      //   options: {
      //     name: "[name].[ext]", //使用源文件的名称和后缀去生成打包文件
      //   },
      // },
      {
        test: /\.(jpg|jpeg|png|svg)$/, //匹配图片格式的文件
        loader: "url-loader", //使用file-loader完成打包
        options: {
          name: "[name].[ext]", //使用源文件的名称和后缀去生成打包文件
          limit: 4096,
        },
      },
      {
        test: /\.css$/, //匹配css格式的文件
        use: ["style-loader", "css-loader"], //使用style-laoder和css-loader完成打包
      },
      {
        test: /\.styl(us)?$/, //匹配stylus格式的文件
        use: [
          "vue-style-loader",
          "css-loader",
          "postcss-loader",
          "stylus-loader",
        ],
      },
    ],
  },
  // 插件配置
  plugins: [
    new VueLoaderPlugin(), //实例化vue-loader插件
    new HtmlWebpackPlugin({
      template: "./index.html", //以根目录下的index.html为模板生成html文件
    }), //html-webpack-plugin插件
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    alias: {
      //别名配置 遇到import vue from 'vue' 此时导入的vue文件就是vue/dist/vue.js
      vue: "vue/dist/vue.js",
    },
  },
};

在package.json 中配置启动项

"scripts": {
  "dev": "webpack-dev-server --config ./webpack.dev.js",//调试时运行 yarn dev 配置文件指向webpack.dev.js
  "build": "webpack --config ./webpack.prod.js" //打包时运行 yarn build 配置文件指向webpack.prod.js
},

完成