使用webpack搭建Vue
什么是webpack，为什么要使用它？
WebPack可以看做是资源构建，模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，less、img、scss、commonJs,ES6等），并将其打包为合适的格式提供浏览器使用。
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/
WebPack和Grunt以及Gulp相比有什么特性
Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
那么开始实现吧，其实我写的这个官网的也是提供的，比葫芦画瓢吧
首先必须要有node，这个使用的是webpack最新版，node呢没有的下载，有的呢升级到最新版本
创建一个项目文件夹 就叫webpack-vue吧
npm init -y 安装，有关node的必须要有package.json文件
利用npm install webpack webpack-cli --save-dev安装依赖
通过 ./node_modules/.bin/webpack -v 来检查是否安装成功 或者直接 webpack-v
然后在package.json中的script中配置：
"scripts": {
"build":"webpack"
},
其实这一点，很多小白在去公司的时候人家公司内部使用webpack搭建的vue怎么跑起来都不知道，其实看script就可以了，有打包，运行等，自行去看
在根目录下创建src文件夹，并创建index.js 这是随意的
在根目录下运行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 我这里这样配置，随意而为吧
如果要手动配置，必须要创建webpack配置文件夹,来执行，webpack默认配置文件:webpack.config.js
在根目录中创建
const path = require('path');//用来快速获取路径
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const config = {
//指定模式，这个是开发环境 production是生产环境
mode: "development",
//项目的入口文件
entry: "./src/index.js",
output: {
//当前根目录下的 dist
path: path.resolve(__dirname, 'dist'),
//输出的文件名
filename: "bundle.js"
},
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
//{test:/\.(sass|scss)$/,use:['style-loader', 'css-loader','sass-loader'] },
{test:/\.(jpg|jpeg|png|gif)$/, use: ['url-loader'] },
{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
{test:/\.vue$/,loader:'vue-loader'}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title:"ssl"
template:'./index.html',
filename:'index.html'
}),
new VueLoaderPlugin()
],
devServer:{
port:9999,
hot:true,//实现热更新
contentBase:path.join(__dirname,'dist')
}
}
module.exports = config;
这是我最后配置完成功吧vue跑起来的一些配置
下面一一介绍
黄色警告如何解决:给webpack.config.js中的mode指定线上上产环境produciton、开发环境development
设置mode为——>mode:“development”,
通过安装 npm i clean-webpack-plugin -D 可以自动清理垃圾的打包文件
在webpack.config.js中首先引入 const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)
在设置
plugins:[
//通过plugins实例化
new CleanWebpackPlugin()
]
基于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',
})
],
webpack默认只识别.js、.json文件，如何让webpack识别css、less、scss、sass、img文件呢？
安装：
npm install style-loader css-loader -D 用于识别css;
npm install less less-loader -D 用于识别less, 定义less是以@开头 例如：@border_a:#00f;
npm install sass-loader node-sass -D 用于识别scss,定义scss是以@开头,例如：@border_a:#00f
npm install url-loader -D 用于识别图片格式，
要想设置多入口，在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
},
ok如上简单了了解了下webpack如何自动配置
那么如何搭建Vue呢？
首先安装es2015（es6）的包：babel，安装babel可以让es6、es7、es8、es9转译为es5
安装命令: npm install --save-dev babel-loader @babel/core
安装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"},
]
}
安装.babelrc 命令npm install @babel/preset-env --save-dev
根目录下创建.babelrc文件
配置如下
{
"presets": ["@babel/preset-env"]
}
编译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:(ssl)=>ssl(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"
}
这里用-S比较好，毕竟自己配置测试，就没有注意这些 -S和-D就不用多介绍了吧，前者是线上，后者是本地
这样创建.vue文件就可以识别了
在vue中集成路由的配置，vuex的配置
axios啦或者什么的和vue一样了
命令：Vuex: npm install vuex -S； 路由：npm install vue-router -S；
路由的配置，在src文件下创建router文件夹，新建index.js文件
```配置的逻辑一样和在vue中
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:(ssl)=>ssl(App)
})
**在App.js中**
APP.vue文件
//router-view就是让路由内容显示的地方
首页
关于
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
})
然后在main.js中引入，挂载，和vue一样
最后呢 代码我提交带github上了
https://github.com/user-sunshilin/webpack-ssl
npm run build 进行打包
npm run dev 进行本地服务器运行
自动生成dist目录