webpack配置组件步骤
1.建立项目目录
|----webpackText
|----dist
|----src
|----img
|----js
|----css
|----index.html
|----main.js
2.初始化项目npm init
3.安装项目的[email protected]和[email protected].
npm install [email protected] --save-dev
npm install [email protected] --save-dev
4.在webpack中使用jQuery
npm install [email protected] --save
4.1在main.js入口文件中导入jquery
//main.js
import $ from 'jquery';
4.2打包文件,并引入
#如果没有配置自动打包需要执行以下命令打包文件
webpack ./src/main.js -o ./dist/bundle.js
#然后在index.html里面引入bundle.js
5.使用简易命令webpack打包文件
5.1在项目根目录下新增webpack配置文 件, webpack.config.js
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname,'./src/main.js'),//指定入口文件的路径
output:{
path:path.join(__dirname,'./dist'),//指定打包好的文件要放到哪个目录下
filename:'bundle.js' //打包好文件的文件名
}
}
5.2现在就可以执行webpack直接打包文件
6.使用webpack-dev-server这个工具,来实现自动打包编译
#6.1安装工具
npm i webpack-dev-server -D
6.2在package.json文件里面配置scripts里面加入dev这一行代码,然后就可以在根目录打开命令提示行输入npm run dev启动工具
注意:
这个要想正常使用,必须在本地项目中安装webpack
packsge文件里面不可以有注释
打包好的文件存在内存中,如果不借助工具,需要手动打包
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000 --hot"
}
相关配置解释
"dev":"webpack-dev-server --自动打开浏览器 --port 端口号 --contentBase 项目根目录 --热更新"
7.将html文件打包放在内存中
#7.1安装工具
npm i [email protected] -D
7.2在webpack.config.js配置如下文件;带*的区域是需要配置的,注意第二行也是
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');//**********************
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
// **********************************************************
plugins: [
//在内存中生成html的插件
new htmlWebpackPlugin({
//选择要加载的html
template: path.join(__dirname, './src/index.html'),
//指定生成HTML模板的名称
filename: 'index.html'
})
],
// ******************************************
}
8.处理css样式表
8.1在css文件夹下简建立css样式表
8.2在mian.js里面导入文件
import './css/index.css';
8.3安装加载器,在项目根目录打开命令提示行
npm i [email protected] -D
npm i [email protected] -D
8.4在webpack.config.js里面配置如下带*的行和区域;
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
// **************************************************
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{test: /\.css$/,use: ['style-loader', 'css-loader']} // 配置处理 .css 文件的第三方loader 规则
]
},
// ******************************************
}
9.处理less样式表
9.1在css文件夹下建立less文件
9.2在main.js里面导入文件
import './css/lesstext.less'
9.3在项目根目录下打开命令提示行
npm i [email protected] -D
npm i [email protected] -D
9.4在webpack.config.js里面配置如下带*的行和区域;如果有其他规则,只需要加带 *的一行
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ,// 配置处理 .css 文件的第三方loader 规则
// ***************************************************
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置处理 .less 文件的第三方 loader 规则
// ******************************************************
]
}
}
10处理sass样式表
10.1在css文件夹下建立scss文件
10.2在main.js里面导入文件
import './css/scsstext.scss';
10.3在项目根目录下打开命令提示行
cnpm i [email protected] -D
cnpm i [email protected] -D
10.4在webpack.config.js里面配置如下带*的行和区域;如果有其他规则,只需要加带 *的一行
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ,// 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置处理 .less 文件的第三方 loader 规则
// ***************************************************
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 配置处理 .scss 文件的 第三方 loader 规则
// ******************************************************
]
}
}
11webpack打包图片
11.1在img文件夹下放一张图片
11.2在样式表里面加载图片路径
body{
background: green;
div{
background: url(../img/c01.png);
}
}
11.3在项目根目录下打开命令提示行
npm i [email protected] -D
npm i [email protected] -D
11.4在webpack.config.js里面配置如下带*的行和区域;如果有其他规则,只需要加带 *的一行
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ,// 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置处理 .scss 文件的 第三方 loader 规则
// ***************************************************
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' } // 处理 图片路径的 loader
// ******************************************************
]
}
}
12webpack使用url-loader处理字体(使用bootatrap字体库)
12.1安装bootstrap3.3.7,注意要安装有字体库的bootatrap;3.3.7就会有
npm i [email protected] -S
#或者使用 cnpm i [email protected] -S
12.2在index.html中正确使用字体
12.3在main.js文件里面导入文件
import '../node_modules/bootstrap/dist/css/bootstrap.css'
12.4在webpack.config.js里面配置如下带*的行和区域;如果有其他规则,只需要加带 *的一行
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ,// 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置处理 .scss 文件的 第三方 loader 规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' },// 处理 图片路径的 loader
// ***************************************************
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' } // 处理 字体文件的 loader
// ******************************************************
]
}
}
13在webpack中使用babel将高级语法转换为低级语法
13.1在项目根目录下打开命令提示行
npm i [email protected] -D
npm i [email protected] -D
npm i [email protected] -D
npm i [email protected] -D
npm i [email protected] -D
13.2在webpack.config.js里面配置如下带*的行和区域;如果有其他规则,只需要加带 *的一行
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ,// 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置处理 .scss 文件的 第三方 loader 规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' },// 处理 图片路径的 loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
// ***************************************************
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 配置 Babel 来转换高级的ES语法
//如果不配置exclude: /node_modules/ webpack会把所有的js打包
// ******************************************************
]
}
}
13.3在项目根目录下新建一个文件叫 .babelrc的文件,加入以下内容
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
14在webpack中配置.vue组件页面的解析
14.1在项目的根目录,打开命令提示行
npm i [email protected] -S
npm i [email protected] -D
npm i [email protected] -D
cnpm i [email protected] -D
cnpm i [email protected] -D
14.2在main.js导入文件
import Vue from '../node_modules/vue/dist/vue.js';
14.3在webpack.config.js里面配置如下带*的行和区域;如果有其他规则,只需要加带 *的一行
const path = require("path"); //因为要手动指定文件路径,需要使用到path模块
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手动指定打包文件的入口和出口
entry: path.join(__dirname, './src/main.js'), //指定入口文件的路径
output: {
path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪个目录下
filename: 'bundle.js' //打包好文件的文件名
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ,// 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置处理 .scss 文件的 第三方 loader 规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' },// 处理 图片路径的 loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
//如果不配置exclude: /node_modules/ webpack会把所有的js打包
// ***************************************************
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
// ******************************************************
]
}
}
14.4实例
main.js
import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
render: c => c(login)
})
login.vue
<template>
<div>
<h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
// 注意：组件中的 data 必须是 function
return {
msg: "123"
};
},
methods: {
show() {
console.log("调用了 login.vue 中的 show 方法");
}
}
};
</script>
<style>
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 这是容器 -->
<div id="app">
<p>{{msg}}</p>
<login></login>
</div>
</body>
</html>
15在vue组件页面中，集成vue-router路由模块
15.1在根目录下打开命令提示行;
npm i [email protected] -S
15.2在main.js文件中导入文件
import VueRouter from 'vue-router';
Vue.use(VueRouter);
15.3创建一个叫app.vue的组件
<template>
<div>
<router-link to="/account">account组件</router-link>
<router-link to="/goodlist">goodlist组件</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
// 注意：组件中的 data 必须是 function
return {
msg: "123"
};
},
methods: {
show() {
console.log("调用了 login.vue 中的 show 方法");
}
}
};
</script>
<style>
</style>
15.4创建一个叫account.vue的组件
<template>
<div>
<h2>这是account组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
15.5创建一个叫goodlist.vue的组件
<template>
<div>
<h2>这是goodlist组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
15.6,创建router实例;
var router = new VueRouter({
routes:[
{path:'/account',component:account},
{path:'/goodlist',component:goodlist}
]
})
15.7在vm实例生挂载路由模块
15.8导入上述三个vue组件
import app from './app.vue'
import account from './account.vue'
import goodlist from './goodlist.vue'
15.9最终的main.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import app from './app.vue'
import account from './account.vue'
import goodlist from './goodlist.vue'
Vue.use(VueRouter);
var router = new VueRouter({
routes:[
{path:'/account',component:account},
{path:'/goodlist',component:goodlist}
]
})
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
render: c => c(app),
router
})
15.10最终的heml页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 这是容器 -->
<div id="app">
</div>
</body>
</html>
16创建子路由;
16.1在上面的路由实例上修改,增加二级路由
var router = new VueRouter({
routes:[
{path:'/account',component:account,
children:[
{path:'login',component:login},
{path:'register',component:register}
]},
{path:'/goodlist',component:goodlist}
]
})
16.2创建login.vue和register.vue组件;
<template>
<div>
<h2>登录组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
<template>
<div>
<h1>注册路由</h1>
</div>
</template>
<script>
</script>
<style>
</style>
16.3将两个组件导入main.js
import login from './login.vue'
import register from './register.vue'
16.4修改account.vue组件
<template>
<div>
<h2>这是account组件</h2>
<router-link to="/account/login">登录组件</router-link>
<router-link to="/account/register">注册组件</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
16.5修改组件样式
<template>
<div>
<h2>登录组件</h2>
</div>
</template>
<script>
</script>
<style scoped="scoped" lang="scss">
/* scoped="scoped" 表示这个样式只有这个组件私有 lang="scss" 表示支持scss语法*/
div{
color: red;
h2{
color: red;
}
}
</style>
