使用webpack（4版本）搭建vue2项目

在学习webpack之前，也从网上搜过一些用webpack搭建vue项目的博客，但是在自己使用的时候会报各种的问题，报错的根本原因其实就是版本的问题，以下代码是经过解决了许多报错问题研究出来最简单最方便搭建vue2项目的方法

1. 首先创建一个空的文件夹

2.初始化配置

npm init -y(不需要交互，下载更快)

3.安装webpack

npm i webpack@4.41.6 webpack-cli@3.3.11 -D

4.创建配置文件

手动的在根目录下创建一个 webpack.config.js文件

配置以下基础内容

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
module.exports = {
entry: './src/js/ index .js', // 入口文件
output: { // 输出配置
filename: './built.js', // 输出文件名
path: resolve(__dirname, 'build/js') // 输出文件路径配置
},
mode: 'development' //开发环境
};

5.下载常用的loader安装包

npm i css-loader@3.4.2 style-loader@1.1.3 less-loader@5.0.0 less@3.11.1 -D  //打包样式资源
npm install --save-dev html-webpack-plugin@3.2.0 //打包html资源
npm install --save-dev html-loader@0.5.5 url-loader@3.0.0 file-loader@5.0.2 //打包图片资源
npm i webpack-dev-server@3.10.3 -D  //服务器端运行
npm install --save-dev mini-css-extract-plugin@0.9.0  //提取css成单独文件
npm install --save-dev postcss-loader@3.0.0 postcss-preset-env@6.7.0  //css兼容性处理
npm install --save-dev optimize-css-assets-webpack-plugin@5.0.3 //压缩css
npm install --save-dev clean-webpack-plugin  //清除打包文件
npm i vue-loader@15.7.1 vue-template-compiler@2.6.10 -D  //安装vue2
npm i vue@2.6.10 vue-router@3.1.3 vue-style-loader@4.1.2 

以上是比较常用的插件，具体插件的用途以及注意事项在(5条消息) webpack（4版本）使用_是张鱼小丸子鸭的博客-CSDN博客中已经详细的说明了，有需要的可以查看一下

还有一种方式，比较便捷，就是复制我们package.json中的devDependencies中的内容，然后使用yarn或者npm i

 "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "url-loader": "^3.0.0",
    "webpack-dev-server": "^3.10.3",
   "vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10"
  },
 "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vue-style-loader": "^4.1.2"
    },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

执行完上面的代码跟我们一点一点下载loader包效果一样，可以选择使用

6.配置文件（webpack.config.js）

const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。

const HtmlWebpackPlugins=require('html-webpack-plugin')
// css分成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const VueLoaderPlugin = require("vue-loader/lib/plugin-webpack4");
process.env.NODE_ENV = 'development'
module.exports = {
    mode: 'development',   // mode=production
  entry: "./src/index.js", // 入口文件
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
    // 'vue$': 'vue/dist/vue.js',
    "@": resolve(__dirname, "./src"),
    },
    },
  output: {
    // 输出配置
    filename: "./built.js", // 输出文件名
    path: resolve(__dirname, "build"), // 输出文件路径配置
  },
  plugins:[
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugins({
        template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
        filename: './src/css/main.css',
        }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],

  module:{
    rules:[
      {
        test: /\.vue$/,
        loader: "vue-loader",
        },
        {
            test: /\.(c|le)ss$/,
            use: [MiniCssExtractPlugin.loader,
                'css-loader',
                 {
                loader: 'postcss-loader',//预处理，这里指的是在解析css之前，做一下兼容性处理
                options: {
                ident: 'postcss',
                plugins: () => [require('postcss-preset-env')()],
                },
                },
               ],
            },
        {
            test:/\.(jpg|png|jpeg|gif)$/,
            loader: "url-loader",
            options: {
                limit: 6 * 1024,// 最大限制图片
                name: "[name].[hash:10].[ext]", //图片命名+哈希值保留位数+后缀
                outputPath: "images", //导出路径
                esModule: false,  //是否是模块
                },
        },
        {
            //用来解析在html文件中的图片
            test: /\.html$/,
            loader: "html-loader",
            },
     
    ]
  },
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动 gzip 压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
    }

};

这是我的项目目录，路由还没有配置，只是搭建了一个基础的vue项目

这样我的vue2项目的就搭建完成了，但是如果我们想要vue项目能在我们项目中显示，我们还需要配一些其他的操作

index.js

import Vue from 'vue'
import App from './App.vue'

new Vue({

  render: h => h(App)
}).$mount('#app')

注意上面的引入，以及引入文件的路径

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
    </div>
</body>
</html>

注意：一定要加上id='app'

index.vue

<template>
    <div>
      哈哈
    </div>
  </template>
  
  <style>

  </style>

浏览器中运行效果

8.运行命令

package.json中配置运行命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

服务器端运行：npm run dev

打包命令：npm run build