webpack4+vue2搭建项目

1.开发环境 webpack+vue

2.电脑系统 windows11专业版

3.初始化项目:

yarn init -y

or 

npm init-y

4.安装webpck webpack-cli

yarn add [email protected] [email protected] -D

5.安装vue

yarn add [email protected] -S

6.新建src文件夹(和node_modules同级)

//在src文件夹新建main.js和App.vue

6-1.App.vue代码如下:

6-2.main.js代码如下:

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

new Vue({
    el:'#app',
    render:h=>h(App)
})

7.新建public文件夹(和node_modules同级)

在public 文件夹下新建 index.html

7-1.index.html代码如下:

8.在根目录新建webpack.config.js(和package.json同级)

const path = require('path');
module.exports = {
    entry: './src/main.js',//入口
    output:{
        filename:'[name].js',//出口文件名
        path:path.resolve(__dirname,'dist'),//出口路径
    },
    mode:'development',
}

yarn webpack

//简单的配置,打包成功了,但是由报错,是因为我们使用了
vue但是没有进行配置,而且我们打包之后的文件没有html文件,
我们需要把public中的index.html打包到dist目录

9.安装html-webpack-plugin

yarn add [email protected] -D

//在webpack.config.js中添加如下代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins:[
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'public/index.html')
        })
    ]
}

yarn webpack

//在webpack.config.js中添加 chunkhash

output:{
    filename:'[name]_[chunkhash].js',//出口文件名
    path:path.resolve(__dirname,'dist'),//出口路径
},

//之前的文件还是存在,那我们能不能在每次打包的时候都删除冗余的文件呢?

10.安装clean-webpack-plugin

yarn add clean-webpack-plugin -D

//在webpack.config.js中添加如下代码
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

yarn webpack

11.安装vue-loader vue-template-compiler

yarn add [email protected] vue-template-compiler -D

//在webpack.config.js中添加如下代码

const VueLoaderPlugin = require('vue-loader/lib/plugin');
// const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/, use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
}

//之前的报错没有了

12.安装vue路由

yarn add [email protected] -S

12-1.在src下新建views文件夹,在views文件夹下新建文件夹About文件夹--->About.vue和Home文件夹--->Home.vue

目录结构如下:

12-2.Home--->Home.vue代码如下:

12-3.About--->About.vue代码如下:

12-4.在src新建router--->index.js

import Vue from "vue";
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: "Home",
        component: () => import(/* webpackChunkName:"Home" */ "../views/Home/Home.vue")
    },
    {
        path: '/About',
        name: "About",
        component: () => import(/* webpackChunkName:"About" */ "../views/About/About.vue")
    }
]

const router = new VueRouter({
    routes,
});

export default router;

12-5.在main.js中进行引入:

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


new Vue({
    el:'#app',
    router,
    render:h=>h(App)
})

12-6.在App.vue中添加代码:

13.现在可以启动项目了,安装webpack-dev-server来启动项目:

yarn add [email protected] -D

13-1.在package.json中添加如下代码:

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

13-2.先打包,yarn build

13-3.启动项目,yarn dev

// Home页面

// About页面

14.使用css扩展语言:less

// 安装less less-loader css-loader style-loader

yarn add [email protected] [email protected] [email protected] [email protected] -D

14-1.在About--->About.less

.About{
  width: 100%;
  height: 300px;
  background-color: pink;
  .About-top{
    width: 100px;
    height: 100px;
    background-color: darkcyan;
  }
}

14-2.在About-->About.vue中引入

  

    我是about页面
    

      我是about上部分
    
  

14-3.在webpack.config.js中添加如下代码:

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/, use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            }
        ]
    },
}

14-4.运行项目 yarn dev

15.抽离css,安装插件mini-css-extract-plugin

yarn add [email protected] -D

//在webpack.config.js中添加如下代码

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: path.resolve(__dirname, 'dist/style')
                    }
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: path.resolve(__dirname, 'dist/style')
                        }
                    },
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "style/[name].css",
        }),
    ]
}

yarn build

less语言已经被转换为css了

10000.本期的分享到了这里就结束啦,希望对你有所啊帮助,让我们一起努力走向巅峰!