2000字长文讲解使用webpack搭建vue项目详细步骤-一一网

一、初始化项目

a.新建一个项目文件夹并进入到项目目录

打开终端输入命令行

mkdir webpack_vue && cd webpack_vue
复制代码

b.初始化项目并创建基础项目结构目录

输入命令行npm init -y初始化项目，会生成一个package.json文件

然后在项目根目录创建以下文件夹及文件

|--src
	|--App.vue
	|--main.js
|--index.html
|--webpack.config.js
复制代码

c.在上面创建的文件内书写基础代码

src/App.vue文件添加vue语法代码，运行后此文件的代码渲染到页面上
```
<template>
    <div>
        Hello world
    </div>
</template>
复制代码
```

src/main.js作为项目的入口文件

import Vue from 'vue';

import App from './App.vue';

new Vue({
    el:'#app',
    render:h=>h(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>
复制代码

webpack.config.js中书写webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
    mode:'development',
    entry:'./src/main.js',
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ]
}
复制代码

提示：vue-loader在v14以上版本需要在plugins配置中new VueLoaderPlugin()

二、安装相关依赖

以上最基础的文件添加完代码，需要将项目运行起来，在安装依赖前，我们先在package.json中添加代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js --progress --open --hot"
},
复制代码

方便后续在命令行中输入npm run dev就可以运行项目

安装webpack、webpack-cli。tips：webpack-cli的版本要和全局安装的webpack版本匹配，否则会报错

npm i webpack webpack-cli -D
复制代码

安装vue、vue-loader、vue-template-compiler

npm i vue vue-loader vue-template-compiler -D
复制代码

安装webpack-dev-server 可提供一个开发的本地服务器

npm i webpack-dev-server -D
复制代码

安装HtmlWebpackPlugin插件

npm i html-webpack-plugin -D
复制代码

完成以上步骤，在命令行输入npm run dev,就能在浏览器打开项目了。

三、完善配置项

如上动手自己操作，你会完成一个最基础的vue项目。但是这写还不是我们的最终目标，让我们来一步步实现完整可用的vue项目搭建吧~

alias别名

我们常常会新建一个components文件夹来存放组件，在其它地方引入组件为了引用方便，我们会使用@/components这种方式，我们来加入代码看看效果

更新项目结构

|--src
+	|--components
+		|--menu.vue
	|--App.vue
	|--main.js
|--index.html
|--webpack.config.js
复制代码

在App.vue中添加代码，引入并使用组件

<template>
    <div>
        Hello world
+       <Menu></Menu>
    </div>
</template>
<script>
+ import Menu from '@/components/menu.vue'
export default{
+   components:{Menu}
}
</script>
复制代码

运行项目，我们会在控制台看到以下报错

这是因为无法解析@，我们修改webpack.config.js文件，给src设置一个别名，让我们可以使用@/components的写法

module.exports = {
    ...
+    resolve:{
+       alias:{
+           "@":path.resolve(__dirname,'src')
+       }
+   },
    ...
}
复制代码

解析css及css预处理器

经过以上步骤，我们已经可以编写vue代码，以及使用vue组件了。但是页面样式我们还没有写，现在我们在menu.vue文件中添加css代码

// components/menu.vue
<style>
.menu_nav{
    width:100%;
    height:50px;
    background:#000;
}
</style>
复制代码

运行项目，会给我们报错，看错误提示告诉我们可能需要额外的loader来处理

我们需要安装处理css的相关依赖，然后在配置文件中添加处理css的规则，通常我们还会使用css预处理器，如：sass、less。因此我们还需要安装对应的loader，这里以sass为例

npm i style-loader css-loader -D
复制代码

安装sass相关依赖

npm i sass sass-locader -D
复制代码

在webpack.config.js中添加配置

module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            },{
+               test:/\.((c|sa|sc)ss)$/,
+               use:['style-loader','css-loader','sass-loader']
            }
        ]
    },
    ...
}
复制代码

style-loader：将css-loader整合在一起的代码，放在页面中的style标签里面
css-loader：将各个css文件整合在一起
sass-loader：将sass语法解析成css

我们完成了css、css预处理器的解析，但是打开浏览器查看css代码，我们发现css属性没有添加上浏览器前缀。这样会有兼容性的隐患。要给css加上浏览器前缀，我们需要安装以下依赖并配置

npm i postcss-loader autoprefixer -D
复制代码

在根目录新建postcss.config.js文件，并添加代码

module.exports = {
    plugins:{
        'autoprefixer':{
            overrideBrowserslist: [
                'Android 4.1',
                'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8'
            ]
        }
    }
}
复制代码

更新webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
    ...
    module:{
        rules:[
            ...
            {
                test:/\.((c|sa|sc)ss)$/,
                use:[
                    'style-loader','css-loader','postcss-loader','sass-loader'
                ]
            }
        ]
    },
    ...
}
复制代码

注意：postcss-loader 一定要在处理css预处理器的loader之前

处理图片文件

绝大多数项目中，一定会有图片文件，那么我们在css中引入背景图片能否有用呢。直接动手操作起来吧，在App.vue中添加css代码引入图片

<template>
    <div>
        Hello world
        <div class="img"></div>
    </div>
</template>
<style lang="scss">
.img{
    width:80px;
    height:80px;
    background:url('./assets/image/logo.png') no-repeat;
    background-size:contain;
}
</style>
复制代码

执行运行命令，会报错无法处理这种类型的文件。

按照错误提示，我们需要使用可解析该类文件的loader进行配置，输入命令行安装依赖

npm i url-loader -D
复制代码

更新webpack.config.js，添加处理图片文件的规则

module.exports = {
    mode:'development',
    entry:'./src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist')
    },
    devtool:'source-map',
    module:{
        rules:[
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name:'assets/[name].[ext]',
                        limit:1024
                    }
                }
            }
        ]
    }
}
复制代码

配置后，页面就能正常显示背景图形式的图片了。

babel-loader 转换js语法

ECMAScript是不断在更新新语法，我们在开发过程中经常会使用更高级的语法，但是有些浏览器却不支持这些新的语法。例如ES6语法中的箭头函数、class类等，我们需要将这些转换成ES5语法。

现在再App.vue文件中添加代码

<script>
import Menu from '@/components/menu.vue'
export default{
    components:{Menu},
+    created(){
+        setTimeout(()=>{
+            console.log('箭头函数的打印')
+        })
    }
}
</script>
复制代码

然后打包生成dist目录，找到main.js，来看打包后发现箭头函数没有转换成普通函数。

针对此，我们需要设置babel转译，输入命令行安装相关依赖

npm i @babel/core @babel/preset-env
复制代码

方式一 在webpack中配置

更新webpack.config.js

module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            }
        ]
    },
    ...
}
复制代码

方式二 使用.babelrc配置文件

在项目根目录新建一个.babelrc文件，添加如下代码也能实现js的转换

{
    "presets":["@babel/preset-env"]
}
复制代码

source map定位问题，调试代码

我们打包源码时，如果出现错误，可能很难在源代码中定位到错误的位置。使用source map配置可以将编译后的代码映射回原始源代码，错误来自哪个js文件，source map会明确告诉开发者。

要使用source map是非常简单的，只需要在配置文件添加devtool属性配置

module.exports = {
    ...
    devtool:'source-map',
    ...
}
复制代码

至此我们已经搭建出一个可用的vue项目，除此之外，webpack还有更多的进阶配置来优化我们的项目。
什么是进阶配置~ 什么是进阶配置~ 如果你想知道什么是进阶配置的话，那么我和你们一起去研究~~

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Microsoft Internet Explorer 内存损坏漏洞

iOS底层探索之多线程(十七)——通过 Swift的Foundation源码分析锁(NSLock、NSCondition、NSRecursiveLock)

听说：分布式ID不能全局递增？

「真岛なおみ」性感超短裙，诱惑你的心灵

如何通过SEO优化让网站排到百度首页？

Cisco Unified Communications Manager DNA组件跨站脚本漏洞

2000字长文讲解使用webpack搭建vue项目详细步骤

一、初始化项目

二、安装相关依赖

三、完善配置项

alias别名

解析css及css预处理器

处理图片文件

babel-loader 转换js语法

source map定位问题，调试代码

Microsoft Internet Explorer 内存损坏漏洞

iOS底层探索之多线程(十七)——通过 Swift的Foundation源码分析锁(NSLock、NSCondition、NSRecursiveLock)

听说：分布式ID不能全局递增？

「真岛 なおみ」性感超短裙，诱惑你的心灵

如何通过SEO优化让网站排到百度首页？

Cisco Unified Communications Manager DNA组件跨站脚本漏洞

2000字长文讲解使用webpack搭建vue项目详细步骤

一、初始化项目

二、安装相关依赖

三、完善配置项

alias别名

解析css及css预处理器

处理图片文件

babel-loader 转换js语法

source map定位问题，调试代码

「真岛なおみ」性感超短裙，诱惑你的心灵