使用webpack4版本搭建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文件

配置以下基础内容

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

5.下载常用的loader安装包

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

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

1.  
   "devDependencies": {
2.  
   "clean-webpack-plugin": "^4.0.0",
3.  
   "css-loader": "^3.4.2",
4.  
   "file-loader": "^5.0.2",
5.  
   "html-loader": "^0.5.5",
6.  
   "html-webpack-plugin": "^3.2.0",
7.  
   "less": "^3.11.1",
8.  
   "less-loader": "^5.0.0",
9.  
   "mini-css-extract-plugin": "^0.9.0",
10.  
    "optimize-css-assets-webpack-plugin": "^5.0.3",
11.  
    "postcss-loader": "^3.0.0",
12.  
    "postcss-preset-env": "^6.7.0",
13.  
    "style-loader": "^1.1.3",
14.  
    "url-loader": "^3.0.0",
15.  
    "webpack-dev-server": "^3.10.3",
16.  
    "vue-loader": "^15.7.1",
17.  
    "vue-template-compiler": "^2.6.10"
18.  
    },
19.  
    "dependencies": {
20.  
    "vue": "^2.6.10",
21.  
    "vue-router": "^3.1.3",
22.  
    "vue-style-loader": "^4.1.2"
23.  
    },
24.  
    "browserslist": {
25.  
    "development": [
26.  
    "last 1 chrome version",
27.  
    "last 1 firefox version",
28.  
    "last 1 safari version"
29.  
    ],
30.  
    "production": [
31.  
    ">0.2%",
32.  
    "not dead",
33.  
    "not op_mini all"
34.  
    ]
35.  
    }

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

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

1.  
   const { resolve } = require("path"); // node 内置核心模块，用来处理路径问题。
2.  
    
3.  
   const HtmlWebpackPlugins=require('html-webpack-plugin')
4.  
   // css分成单独文件
5.  
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')
6.  
   const {CleanWebpackPlugin}=require('clean-webpack-plugin')
7.  
   const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
8.  
   const VueLoaderPlugin = require("vue-loader/lib/plugin-webpack4");
9.  
   process.env.NODE_ENV = 'development'
10.  
    module.exports = {
11.  
    mode: 'development', // mode=production
12.  
    entry: "./src/index.js", // 入口文件
13.  
    resolve: {
14.  
    extensions: [".js", ".vue", ".json"],
15.  
    alias: {
16.  
    // 'vue$': 'vue/dist/vue.js',
17.  
    "@": resolve(__dirname, "./src"),
18.  
    },
19.  
    },
20.  
    output: {
21.  
    // 输出配置
22.  
    filename: "./built.js", // 输出文件名
23.  
    path: resolve(__dirname, "build"), // 输出文件路径配置
24.  
    },
25.  
    plugins:[
26.  
    new VueLoaderPlugin(),
27.  
    new CleanWebpackPlugin(),
28.  
    new HtmlWebpackPlugins({
29.  
    template: './src/index.html'
30.  
    }),
31.  
    new MiniCssExtractPlugin({
32.  
    filename: './src/css/main.css',
33.  
    }),
34.  
    new OptimizeCssAssetsWebpackPlugin(),
35.  
    ],
36.  
     
37.  
    module:{
38.  
    rules:[
39.  
    {
40.  
    test: /\.vue$/,
41.  
    loader: "vue-loader",
42.  
    },
43.  
    {
44.  
    test: /\.(c|le)ss$/,
45.  
    use: [MiniCssExtractPlugin.loader,
46.  
    'css-loader',
47.  
    {
48.  
    loader: 'postcss-loader',//预处理，这里指的是在解析css之前，做一下兼容性处理
49.  
    options: {
50.  
    ident: 'postcss',
51.  
    plugins: () => [require('postcss-preset-env')()],
52.  
    },
53.  
    },
54.  
    ],
55.  
    },
56.  
    {
57.  
    test:/\.(jpg|png|jpeg|gif)$/,
58.  
    loader: "url-loader",
59.  
    options: {
60.  
    limit: 6 * 1024,// 最大限制图片
61.  
    name: "[name].[hash:10].[ext]", //图片命名 哈希值保留位数 后缀
62.  
    outputPath: "images", //导出路径
63.  
    esModule: false, //是否是模块
64.  
    },
65.  
    },
66.  
    {
67.  
    //用来解析在html文件中的图片
68.  
    test: /\.html$/,
69.  
    loader: "html-loader",
70.  
    },
71.  
     
72.  
    ]
73.  
    },
74.  
    devServer: {
75.  
    // 项目构建后路径
76.  
    contentBase: resolve(__dirname, 'build'),
77.  
    // 启动 gzip 压缩
78.  
    compress: true,
79.  
    // 端口号
80.  
    port: 3000,
81.  
    // 自动打开浏览器
82.  
    open: true
83.  
    }
84.  
     
85.  
    };

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

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

index.js

1.  
   import Vue from 'vue'
2.  
   import App from './App.vue'
3.  
    
4.  
   new Vue({
5.  
    
6.  
   render: h => h(App)
7.  
   }).$mount('#app')

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

index.html

1.  
   <!DOCTYPE html>
2.  
   <html lang="en">
3.  
   <head>
4.  
   <meta charset="UTF-8">
5.  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.  
   <title>Document</title>
8.  
   </head>
9.  
   <body>
10.  
    <div id="app">
11.  
     
12.  
    </div>
13.  
    </body>
14.  
    </html>

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

index.vue

1.  
   <template>
2.  
   <div>
3.  
   哈哈
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <style>
8.  
    
9.  
   </style>

浏览器中运行效果

8.运行命令

package.json中配置运行命令

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

服务器端运行：npm run dev

打包命令：npm run build