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

什么是webpack，为什么要使用它？

一. webpack核心

entry:入口output:出口loader:资源转换器plugin:插件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 })

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