使用webpack4构建vue项目

米汤MT呀
875 阅读3分钟

Ⅰwebpack打包

1.1——初始化项目文件结构

image-20210619132056950

1.2——初始化package.json文件

键入命令行

npm init -y

执行后根目录会生成一个名为package.json的配置文件

1.3——安装webpack

键入命令行

npm i -D webpack@4.23.0 webpack-cli@3.1.2

1.4——配置webpack.config.js文件

首先在根目录创建名为webpack.config.js文件

然后按如下代码配置：

const path = require('path');
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    //定义入口文件，即要打包的文件
    output:{
        path:path.join(__dirname,'./dist'),
        filename:"bundle.js"
    },
    //定义出口路径，即打包好后要输出的路径
    mode:"development" //设定打包环境为开发环境，如果要设置生产环境，应是production。如果此项在package.json文件中有设置过，则该行省略
}

1.5——配置package.json文件

在package.json文件中加入该段：

"scripts":{
    "build":"webpack --mode development"
}

参数详解：

  • --progress：显示打包进度
  • --colors：打包提示的信息是否标有不同颜色
  • --watch：监听变动并自动打包，这个参数的作用就是监听文件是否有变化，如果有变化就自动重新编译变化的文件
  • --mode：设置打包环境，后跟development为开发环境，后跟production为生产环境

1.6——执行打包

键入以下指令，即可执行打包操作：

npm run build

Ⅱbabel的使用

2.1——介绍

通过webpack配合使用babel可以将较新版本的ECMAScript转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其他环境中

2.2——安装

安装babel至本地项目中

npm i -D babel-loader @babel/core

为了转化es6代码，要安装babel插件

npm i -D @babel/preset-env @babel/polyfill

安装防止全局污染babel插件

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2

2.3——配置babel

在根目录下创建.babelrc配置文件，里面写入：

{
	"presets":["@babel/preset-env"],
    "plugins":[
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs":2,
                "helpers":true,
                "regenerator":true,
                "useESModules":false
            }
        ]
    ]
}

配置webpack.config.js

const path = require('path');
module.exports = {
    //...
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:"babel-loader"
            }
        ]
    }
}

Ⅲwebpack-dev-server的使用

3.1——介绍

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务

3.2——安装

键入如下指令进行安装：

npm i -D webpack-dev-server@3.11.2

3.3——配置package.json文件

"scripts":{
	"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}

参数详解：

  • --open：设置启动服务时自动打开浏览器
  • --port 端口号：配置服务启动的端口号
  • --contentBase src：启动服务设置index.html的所在目录
  • --hot：设置采用补丁的方式热更新

3.4——运行

在src文件夹中创建main.js文件，里面写入

console.log("Hello World")

在src文件夹中创建index.html文件，里面引入这段

<script src="/bundle.js"></script>

键入如下命令即可启动服务，即可看到控制台打印的"Hello World"

npm run dev

3.5——使用html-webpack-plugin插件配置启动页面

前面在配置生成main.js的使用时候，已经将其存储在内存中编译生成。那么能不能将index.html页面也加载存储到内存中呢？

这个当然可以，可以使用html-wabpack-plugin插件来完成这部分工作

该插件的两个作用：

  • 自动在内存中根据指定页面生成一个内存的页面
  • 自动把打包好的bundle.js追加到页面中去

安装html-webpack-plugin：

npm install -D html-webpack-plugin@3.2.0

配置webpack.config.js文件：

//..
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //..
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),	//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:"index.html"	//指定生成的页面名称
        })
    ]
}

配置完毕之后就可以删除index.html中script的js引入语句，因为html-webpack-plugin会自动为你追加

Ⅳ其他类型的文件在打包时的处理

4.1——css类型

安装处理工具：

npm install -D style-loader@1.0.2 css-loader@3.2.0

配置webpack.config.js文件：

const path = require('path');
module.exports = {
    //...
    module:{
        rules:[
            //..
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

4.2——less类型

安装处理工具：

npm install -D less-loader@5.0.0 less@3.9.0

配置webpack.config.js文件：

const path = require('path');
module.exports = {
    //...
    module:{
        rules:[
            //..
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    }
}

4.3——sass类型

安装处理工具：

npm install -D sass-loader@7.1.0 node-sass@4.12.0
npm install -D sass fiber

配置webpack.config.js文件：

const path = require('path');
module.exports = {
    //...
    module:{
        rules:[
            //..
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

4.4——图片、字体等类型

安装处理工具：

npm install -D url-loader@2.0.1 file-loader@4.0.0

配置webpack.config.js文件：

//第一种写法
const path = require('path');
module.exports = {
    //...
    module:{
        rules:[
            //..
            {
                test:/\.(jpg|png|gif|bmp|jpeg|woff|svg|eot|ttf)$/,
                use:'url-loader?limit=500&name=[hash:8]-[name].[ext]'
            }
        ]
    }
}
//第二种写法
const path = require('path');
module.exports = {
    //...
    module:{
        rules:[
            //..
            {
                test:/\.(jpg|png|gif|bmp|jpeg|woff|svg|eot|ttf)$/,
                use:[{
                    loader:"url-loader",
                    options:{
                        limit:500,
                        name:'[hash:8]-[name].[ext]'
                    }
                }]
            }
        ]
    }
}

4.5——vue类型

安装处理工具：

npm i -D vue-loader@14.2.4 vue-template-compiler@2.6.14

配置webpack.config.js文件：

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

4.6——搭配mini-css-extract-plugin插件

在webpack4中，已不再支持对extract-text-webpack-plugin插件的支持的，但官方推荐使用mini-css-extract-plugin插件完成css样式的抽离

安装插件：

npm install -D mini-css-extract-plugin@0.8.0
npm install -D vue-style-loader	//作用于vue单文件组件中，配合mini-css-extract-plugin完成抽离

配置webpack.config.js文件

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    //...
    module:{
        rules:[
            //..
			{
                test:/\.vue$/,	//用于处理vue中单文件组件的每一个style标签中的css样式
                loader:'vue-loader',
                options:{
                    loaders:{
                        css:[
                            'vue-style-loader',
                            {loader:MiniCssExtractPlugin.loader},
                            {loader:"css-loader"}
                        ]
                    }
                }
            },
            {
                test:/\.css$/,	//处理main.js中import引入的每一个css文件
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:"css-loader"}
                ]
            },
            {
                test:/\.less$/,	//用来处理main.js中import引入的每一个less文件
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:"css-loader"},{loader:"less-loader"}
                ]
            }
        ]
    },
    plugins:[
        //..
        new MiniCssExtractPlugin({
        	filename:"css/common.css"
    	})
    ]
}

之后，在每次import导入css文件时，都会自动完成css样式的抽离

Ⅴ构建Vue项目

5.1——在本地安装Vue库

npm install -S vue

5.2——使用传统的方式创建实例

  1. 在main.js文件中引入vue

    import Vue from "vue"

  2. 创建vue实例

    var vm = new Vue({
	el:"#app",
	data:{
		message:"Hello World"
	}
})

  3. 报错，提示 "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."

    在webpack中，由于使用import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，导致报错。

  4. 解决办法

    打开【项目根目录 =》 node_modules =》 vue文件夹】中的package.json配置文件，修改如下属性：

    //原代码
"main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",

//现改为
"main": "dist/vue.min.js",
  "module": "dist/vue.min.js",

5.3——使用单文件组件的方式创建实例

  1. 在src文件夹下的components文件夹中创建app.vue文件

    <template>
	<h1>{{message}}</h1>
</template>
<style scoped>
    h1{
        wdith:150px;
        height:150px;
        background:blue;
    }
</style>
<script>
	export default{
    	data:function(){
            return {
                message:"Hello World"
            }
        }
    }
</script>

  2. 在main.js文件中引入vue，引入app.vue文件

    import Vue from 'vue'
import app from "components/app.vue"

  3. 创建Vue实例

    var vm = new Vue({
	el:"#app",
    render:function(createElement){
        return createElement(app)
    }
})
avatar
文章
阅读
粉丝