webpack
1.webpack是一种静态资源构建，打包的工具
除了webpack还有grunt,gulp，百度（fis）
2.下载package.json文件
npm init -y
backage.json文件里配置
"scripts": {
"build": "webpack"
},
3.安装webpack,webpack-cli
npm install webpack webpack-cli --save-dev
简写：npm i webpack webpack-cli -D
检测:./node_modules/.bin/webpack -v
4.在项目根目录下创建一个src,并建立一个index.js
5.在项目根目录下运行npm run build
会构建一个dest目录并生成main.js文件
webpack4.x默认是零配置
默认的入口：src/index.js
默认出口：dist/main.js
手动配置
入口：src/xxx.js
出口:dist/bundle.js
6.如果手动配置，必须创建webpack配置文件来执行
默认webpack配置文件：webpack.config.js
const path=require("path")
const config={
//项目入口文件
entry:"./src/main.js",
output:{
//项目输出目录
path:path.resolve(__dirname,"dist"),
//输出的文件名
filename:"bundle.js"
}
}
module.exports = config;
*webpack如何指定多入口：通过给entry添加对象形式配置多入口
entry:{
"main":"./src/main.js",
"home":"./src/home.js"
},
output:{
//项目输出目录
path:path.resolve(__dirname,"dist"),
//输出的文件名
filename:"[name].js" //chunk
},
如果运行指定的配置文件，而不是默认的webpack.config.js，则在通过 scripts运行时添加--config
例如：
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
说明：webpack可以将node服务端的js代码通过构建直接运行在浏览器
7.
*黄色警告解决
mode:"development" //开发环境
或
mode:"production" //生产环境--线上环境
或
mode:"none" //不配置
*清理打包后的垃圾（多余）文件
安装：clean-webpack-plugin
npm install clean-webpack-plugin -D
引入：webpack.config.js里
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
调用：plugins:[
new CleanWebpackPlugin()
]
*通过package.json的scripts属性运行npm包
npm i webpack-dev-server -D
"scripts": {
"build": "webpack",
"dev":"webpack-dev-server"
},
npm run scripts的属性名
问题二：运行npm的别慢，那就改一下npm镜像，改成npm淘宝镜像
npm config set registry https://registry.npm.taobao.org
查看修改的配置：npm config list
在webpack.config.js文件内
//启动服务器环境
devServer:{
port:"9999"，
contentBase: path.join(__dirname, 'dist')
}
*把构建环境自动注入index.html文件内
安装：npm install html-webpack-plugin -D
引入：
const HtmlWebpackPlugin = require('html-webpack-plugin');
配置：
plugins:[
//添加多余文件清理插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '管理输出'
})
],
//把index.html文件当成模板，打包时改名home.html
plugins:[
//添加多余文件清理插件
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:"./index.html", //读取模板的入口文件
filename:'index.html' //生成打包后的html
})
],
*样式
安装插件
npm install style-loader css-loader -D
配置webpack.config.js中
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
main.js中引入
import './style/test.css'
*配置less和sass
webpack识别less：
安装：npm install less less-loader -D
配置：
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css- loader','less-loader']},
]
使用：用@符号
@border_c:blue;
div{
border: 1px solid @border_c;
}
webpack识别sass：
安装：npm install node-sass sass-loader@7.3.1 -D
配置：
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']},
]
使用：用$符号
$border_c:blue;
div{
border: 1px solid $border_c;
}
*webpac识别图片或其他文件：
npm install url-loader -D
集成vue
1.安装es6的包：babel
npm install --save-dev babel-loader @babel/core @babel/preset-env -D
配置：
{ test: /\.js$/, exclude: /node_modules/, loader: "babel- loader" }
创建.babelrc文件
{
"presets": ["@babel/preset-env"]
}
2.安装vue包：vue， vue-loader，vue-template-compiler
安装：npm install vue vue-loader vue-template-compiler
webpack.config.js中引入：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
配置：plugins:[
new VueLoaderPlugin()
],
一. index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是项目的入口</title>
</head>
<body>
<h1>我是注入的html</h1>
<div id="app"></div>
</body>
</html>
二. 在src下建App.vue文件
<template>
<div>
<h2>{{title}}</h2>
<p>我来到了vue世界</p>
</div>
</template>
<script>
export default {
name:"app",
data(){
return{
title:"我就是我"
}
}
}
</script>
三. main.js里配置
import Vue from "vue";
import App from "./App.vue"
new Vue({
el:"#app",
render:(h)=>h(App)
})
3.路由配置：
安装：vue vue-router
创建router文件夹
下index.js里配置路由
import Vue from "vue";
import Router from "vue-router";
import Home from "../components/Home.vue"
import Cate from "../components/Cate.vue"
Vue.use(Router)
const router = new Router({
routes:[
{
path: '/home',
component: Home,
name:'Home'
},
{
path: '/cate',
component: Cate,
name:'Cate'
}
]
})
export default router;
main.js里引入router
import Vue from "vue";
import App from "./App.vue"
import router from "./router/index.js"
new Vue({
el:"#app",
router,
render:(h)=>h(App)
})
App.vue根组件里展示
<router-view></router-view>
