基于node.js,手动搭建webpack集成vue

什么是webpack,为什么要使用它?

一. webpack核心

  1. entry:入口
  2. output:出口
  3. loader:资源转换器
  4. plugin:插件
  5. mode:模式

还有其他的打包压缩工具:
grunt:https://www.gruntjs.net/
gulp:https://www.gulpjs.com.cn/
fis3(百度):http://fis.baidu.com/
webpack:https://webpack.js.org/

1、什么是Webpack

WebPack可以看做是资源构建,模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,less、img、scss、commonJs,ES6等),并将其打包为合适的格式提供浏览器使用。

2、WebPack和Grunt以及Gulp相比有什么特性

Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

———下面就开始构建webpack———

1、创建一个项目文件夹
2、npm init -y 安装,有关node的必须要有package.join文件
3、利用npm install webpack webpack-cli -D或者npm install webpack webpack-cli --save-dev安装依赖
4、通过 ./node_modules/.bin/webpack -v 来检查是否安装成功
5、在package.json中的script中配置:
"scripts": {
    "build":"webpack"
  },
6、 在根目录下创建src文件夹,并创建index.js
7、在根目录下运行npm run build , 会构建出dist文件夹,和压缩的main.js文件

webpack4.x 默认是零配置,零配置就是不用配置入口出口输出的文件名,只要npm run build,会自动构建出来,放到dist目录,即main.js文件

webpack即默认的入口:src/index.js,默认出口:dist/main.js

手动配置将入口设置为:src/main.js,出口:dist/bundel.js

8、如果要手动配置,必须要创建webpack配置文件夹,来执行,webpack默认配置文件:webpack.config.js
const path = require('path')
const config = {
    //项目的入口文件,也就是代码执行从这里开始的
    entry: "./src/main.js",
    //项目的输出目录
    output: {
        //获取到当前根目录,在拼接一个dist目录
        path: path.resolve(__dirname, "dist"),
        //输出的文件名
        filename: "bundel.js"
    }
}
module.exports = config

9、安装 npm i clean-webpack-plugin -D 可以自动清理垃圾的打包文件

在webpack.config.js中设置 const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)
plugins:[
//通过plugins实例化
new CleanWebpackPlugin()
]

10、基于webpack搭建一个本地环境安装: npm i webpack-dev-server -D在package.js中配置
  "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server"
  },

还可以在webpack.config.js中设置固定的端口号

devServer: {
		//实现热更新
        hot:true,
        //设置指定端口号
        port: 9999,
        //最后出书的路径
        contentBase: path.join(__dirname, 'dist')
    }

11、如何实现自动构建注入文件

安装: npm install html-webpack-plugin -D
在webpack.config.js中配置

//自动注入
const HtmlwebpackPlugin =require('html-webpack-plugin')
 plugins: [
 		//清理垃圾的打包文件
        new CleanWebpackPlugin(),
        new HtmlwebpackPlugin({
            //可以指定文件当模板  让这个文件为入口  读取模板的入口文件
            template:"./index.html",
            //最会将index.html输出到dist文件夹中 
            filename:'index.html',
        })
    ],

12、webpack默认只识别.js、.json文件,如何让webpack识别css、less、scss、sass、img文件

安装:
1、 npm install style-loader css-loader -D 识别css;
2、npm install less less-loader -D 识别less, 定义less是以@开头 例如:@border_a:#00f;
3、npm install sass-loader node-sass -D 识别scss,定义scss是以@开头,例如:@border_a:#00f
4、npm install url-loader -D 识别图片格式,

13、要想设置多入口,在webpack.config.js中配置
    //项目的入口文件,也就是代码执行从这里开始的
    entry:{
	"index":"./src/main.js",
	"home":"./src/home.js"
	},
    //项目的输出目录
    output:{
  		   //获取到当前文件的根目录  设置输出目录
    path:path.resolve(__dirname,"dist"),
           //输出的文件名
    filename:"[name].js"   //开启多入口的话这里要写"[name]_[hash:指定hash位数].js" ,
           //hash只要文件一改,hash就会变,可以实时的更新后台传递数据    //chunk
    },

二. 如何集成Vue

1、安装es6的包:babel,安装babel可以让es6、es7、es8、es9转译为es5 安装命令: npm install --save-dev babel-loader @babel/core
2、安装Vue包
//webpack通过loader识别文件的匹配规则
    module:{
        //css的配置
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.(sass|scss)$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|jpeg|png|gif)$/,use:['url-loader']},
            //babel-loader意思排除node_modules外的.js文件,
            {test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
        ]
    }

3、安装.babelrc 命令npm install @babel/preset-env --save-dev;根目录下创建.babelrc文件
{
    "presets": ["@babel/preset-env"]
}

4、编译template模板,安装vue包:命令npm install vue vue-loader vue vue-template-compiler -D在src文件下新建main.js文件,进行配置
import Vue from 'vue'
import App from './App.vue'

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

在webpack.config.js文件中引入,并在plugins中实例化插件,vue就集成了

const VueLoaderPlugin=require('vue-loader/lib/plugin')
	// 里面可以放各种插件
    plugins:[
        //添加文件清理的插件
        new CleanWebpackPlugin(),
        new HtmlwebpackPlugin({
            //可以实现热更新,类似与ajax
            hot:true,
            //让这个文件为入口  读取模板的入口文件
            template:"./index.html",
            //最会将index.html输出到dist文件夹中 
            filename:'index.html',
        }),
        new VueLoaderPlugin()
    ],

这时有个地方:package.json文件中

 "dependencies": {
    "vue": "^2.6.11",   //最好是放在dependencies中 
					      通过命令npm install vue -S   
					      如果"vue": "^2.6.11",在devDependencies中,
					      通过npm uninstall vue -S卸载掉,在安装npm install vue -S 
    "vue-router": "^3.1.6"
  }

5、在vue中集成路由的设置,vuex的设置命令:Vuex: npm install vuex -S; 路由:npm install vue-router -S;路由的配置,在src文件下创建router文件夹,新建index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件
import Home from '../pages/home.vue'
import About from '../pages/about.vue'

//配置路由
const routes = [
    { path: "/home", component: Home, name: "Home" },
    { path: "/about", component: About, name: "about" },
]

//实例化路由
const router = new VueRouter({
    routes
})
//导出
export default router

在main.js中将router挂载到vue实例上

import Vue from 'vue'
import App from './App.vue'
//引入router文件
import router from './router/index'
//引入vuex store文件
import store from './store/index.js'

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

在App.js中

<template>
    <div>
        <h2>APP.vue文件</h2>
       //router-view就是让路由内容显示的地方
      <router-view></router-view>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
    </div>
</template>
<script>
export default {
    name:"app",
    data() {
        return {}
    },
}
</script>
<style></style>

Vuex的配置,在src文件下创建store文件夹,新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//state
const state={
    count:0,
};
//action
const action={

};

//mutations
const mutations={

};
//getters
const getters={

};

export default new Vuex.Store({
    state,
    action,
    mutations,
    getters
})


好啦,到这里我们的任务就完成啦,希望大家可以留言评论,相互交流。

你可能感兴趣的:(vue,javascript,webpac,vue,Node.js,JavaScript,vue,npm)