Webpack4.0+Vue2.5项目构建


Part.1 项目初始化

首先创建项目目录,并进入目录

mkdir mragon-webpack-vue-demo

cd mragon-webpack-vue-demo

生成package.json

npm init -y //添加-y参数跳过基本信息的填写

创建基本的目录结构:

|-- mragon-webpack-vue-demo
    |-- src
        |-- js
            |-- main.js //入口文件
    |-- webpack.config.js  //webpack配置文件

先安装基本的依赖,之后的依赖随用随安装

  • vue项目肯定是要安装vue的
    npm install vue -S
  • webpack也是必不可少的
    npm install webpack -D
  • webpack4.0+还要安装webpack-cli
    npm install webpack-cli -D

编写入口文件main.js

//在项目中引入vue
import Vue from 'vue';

Vue.configproductionTip = false;

//创建一个vue实例,挂载到指定节点
new Vue({
    el: '#app',
    render: (h) => h('h1', 'hello mragon')
})

基本的准备先做这么多,之后根据需求来慢慢完善项目

Part.2 最简单的项目打包

我们先尝试将最基本的项目进行打包

编写webpack.config.js,先配置最基本的属性

//引入node的path模块用于操作路径
const path = require('path');

module.exports = {

    //入口文件
    entry: './src/js/main.js',

    //打包输出目录
    output: {
        filename: 'bundle.js', //打包之后的文件名
        path: path.resolve(__dirname, 'dist') //输出到dist目录
    }
}

我们前端项目肯定需要一个html文件来作为项目首页,但是这个html文件如何引入我们打包好的资源是一个问题,虽然我们可以通过手动编写代码引入资源,但是当项目体积变大,需求更多的时候,手动引入资源是一件麻烦的事,所以我们需要webpack来帮我们完成这件事,这需要引入一个webpack的插件:html-webpack-plugin

通过npm安装html-webpack-plugin
npm install html-webpack-plugin -D

修改webpack.config.js来使用html-webpack-plugin

const path = require('path');
//引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //入口文件
    entry: './src/js/main.js',
    //将插件加入到项目打包的过程中
    plugins: [
        new HtmlWebpackPlugin()
    ],
    //打包输出目录
    output: {
        filename: 'bundle.js', //打包之后的文件名
        path: path.resolve(__dirname, 'dist') //输出到dist目录
    }
}

通过插件可以让webpack帮我们生成一个html文件作为项目主页,但是现在我们无法控制这个主页应该具备哪些元素,所以我们需要准备一个html文件作为模板,让webpack根据我们的模板来生成项目主页,所以我们在src目录下新建一个views目录,在里面新建一个index.html作为主页模板

变更后的项目目录如下:

|-- mragon-webpack-vue-demo
    |-- src
        |-- js
            |-- main.js //入口文件
        |--views
            |-- index.html //主页模板
    |-- webpack.config.js  //webpack配置文件

编写主页模板 index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
 <meta charset="utf-8">
 <title>mragon.cn</title>
</head>
<body>

 <!--添加一个节点用于挂载vue实例-->
 <div id="app">

 </div>

</body>
</html>

修改webpack.config.js,告诉webpack使用我们提供的模板生成主页

//给插件的template属性指定一个相对路径
new HtmlWebpackPlugin({
    template: './src/views/index.html'
})

配置好主页模板之后就可以进行打包了

我们需要运行命令webpack --config webpack.config.js

但是这个命令太冗长了,我们可以利用sPript脚本来简化命令,打开package.json文件,在script下增加一行:
"build":"webpack --config webpack.config.js"

保存之后我们可以用npm run build来打包项目,此时运行npm run build命令就相当于运行了webpack --config webpack.config.js

总之无论运行哪条命令,打包之后会发现项目目录下多了一个dist目录,里面就是打包之后的项目文件

打开里面的index.html,你会发现和我们准备的模板基本一致,不过webpack已经自动帮我们把打包好的bundle.js引入了进去

Part.3 处理vue单文件组件

处理Vue单文件组件,我们需要使用vue-loader来处理,而vue-loader则依赖于css-loader和vue-template-compiler这两个包,所以先安装这些依赖:

  • 安装css-loader
    npm install css-loader -D
  • 安装vue-template-compiler
    npm install vue-template-compiler -D
  • 安装vue-loader
    npm install vue-loader -D

编写webpack.config.js

//使用vue-loader需要引用相应的项目模块
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//增加相应的规则处理.vue文件
module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader'
    }]
},
//将插件加入到项目打包的过程中
plugins: [
    //新增vue-loader插件
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        template: './src/views/index.html'
    })
],

./src/js目录下添加一个App.vue作为项目的根组件

变更后的项目目录如下:

|-- mragon-webpack-vue-demo
    |-- src
        |-- js
            |-- main.js //入口文件
            |-- App.vue //项目根组件
        |--views
            |-- index.html //主页模板
    |-- webpack.config.js  //webpack配置文件

编写App.vue的内容

<template lang="html">
<div>
 <h1>hello mragon</h1>
</div>
</template>

<script>
export default {}
</script>

<style lang="css">
</style>

在main.js中引入App.vue组件

//在项目中引入vue
import Vue from 'vue';
//引入App.vue
import App from './App.vue';

Vue.configproductionTip = false;

//创建一个vue实例,挂载到指定节点
new Vue({
    el: '#app',
    components: {
        App
    }
    render: (h) => h(App)
})

之后npm install build运行项目,查看效果

Part.4 处理css文件

现在项目已经可以处理.vue文件了,但是还不能处理样式文件
处理css文件需要用的css-loader之前已经安装过了,所以只需要修改配置文件就可以了

编写webpack.config.js,添加相应的处理规则

{
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader']
}

然后再App.vue组件中写一点样式加以验证

<template lang="html">
<div>
 <h1>hello mragon</h1>
</div>
</template>

<script>
export default {}
</script>

<style lang="css">
h1{
 color:red;
}
</style>

运行npm run build 组件中的文字颜色成功变红了


更多内容 : 在Webpack4.0+Vue2.5项目中使用SCSS、ES6以及DEV SERVER

声明:Mragon|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Webpack4.0+Vue2.5项目构建


Carpe Diem and Do what I like