一 webpack的安装
1.查看是否有node node -v
2.查看是否有webpack --version
表示没有webpack,此时需要安装webpack
全局安装npm install webpack@3.6.0 -g
**局部安装npm install webpack@3.6.0 --save-dev
**
安装完成之后还是不是内部命令,可以参考
参看配置:https://www.cnblogs.com/fengchaoran/p/8461317.html
配置完成之后,然后再测试webpack --version,会出现以下界面,表示安装成功
二.webpack的起步
1.在文件夹下面建立两个文件夹,分别是dist(发布)和src(开发),同时建立一个html文件
2.src下面建立两个文件分别是main.js和mainUtils.js文件
mani.js文件类容为
const {add,mul}=require('./mainUtils')
console.log(add(20, 30));
console.log(mul(30, 50));
mainUtils.js文件类容为
function add(num1,num2) {
return num1+num2;
}
function mul(num1,num2) {
return num1*num2;
}
module.exports={
add,mul
}
3.进行打包,打包的命令为:webpack ./src/main.js ./dist/bundle.js
打包成功,显示
webpack ./src/main.js ./dist/bundle.js
Hash: 51b79ba7e5c6ccab3f92
Version: webpack 3.6.0
Time: 56ms
Asset Size Chunks Chunk Names
bundle.js 2.77 kB 0 [emitted] main
[0] ./src/main.js 94 bytes {0} [built]
[1] ./src/mainUtils.js 131 bytes {0} [built]
E:\Study\webstorm\vue\LearnVuejs04-V2\01-webpack的使用\01-webpack的起步>
4.配置webStorm的Dos窗口,使得输入webpack就能直接编译浏览器可执行文件
4.1 完成文件的初始化,命令 :npm init
4.2 完成文件的依赖,命令 :npm install
4.3 配置webpack.config.js文件
1.在跟文件夹下面建立一个webpack.config.js文件,文件名只能为:webpack.config.js
const path =require('path');//这里路径的获取需要执行文件的初始化npm init
module.exports={
entry:'./src/main.js', ##执行文件的入口
output: {
filename:'bundle.js', ##执行文件的名字
path:path.resolve(__dirname,'dist') ##执行文件的全路径
}
}
4.4输入命令:webpack,显示下面的页面表示成功
4.5 实现webpack文件的映射,映射到npm run build上
此时输入:npm run build 会进行打包
5.局部安装webpack
5.1 执行webpack时,此时找的是全局的包,由于版本的控制,此时需要找本地的包,所以需要安装本地包,安装本地命令:npm install webpack@3.6.0 --save-dev,此时执行webpack找到的包还是全局的,需要通过相应的包进行进入
6.配置css样式,加载到index.html中去
6.1安装相关的插件,6个
npm install style-loader --save-dev
npm i style-loader css-loader --save-dev
npm i postcss-loader --save-dev
npm i autoprefixer --save-dev
npm install postcss-import --save-dev
npm install --save-dev css-loader
6.2配置webpack.config.js配置文件
const path =require('path');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
}
]
}
}
6.3 在入口main.js中配置css文件的引入
console.log(mul(30, 50));
//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
//require("./css/normal.css");
import css from './css/normal.css'
6.4 执行命令: npm run build
6.5 后台显示结果展示
7.配置less样式,加载到index.html中去
7.1 安装less文件
npm install less-loader@4.1.0 --save-dev
7.2 在main.js里面引入less文件
//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')
console.log(add(20, 30));
console.log(mul(30, 50));
//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
//4.引入less文件
require("./css/special.less")
7.3 配置webpack.config.js文件
const path =require('path');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
]
},
}
7.4 运行命令:npm run build,测试是否成功
8.在样式中添加背景颜色
8.1.安装图片相关的包
npm install --save-dev url-loader
8.2.把在webpack.config.js中配置url,注意limit表示图片大小的限制,大于图片,当大于限制时,此时需要安装:npm install file-loader@3.0.1 --save-dev
const path =require('path');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
//图片的配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1890000,
name:'img/[name].[hash:8].[ext]',//配置图片的路径:src/1+8位hash+以前的后缀名
}
}
]
}
]
},
}
8.3.重新编译,命令为:npm run build
8.4图片显示结果
9.ES6转化为ES5,使得所有的浏览器都识别
9.1安装 babel-loader
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
9.2修改配置文件webpack.config.js,使得es6能够识别
const path =require('path');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1890,
name:'img/[name].[hash:8].[ext]',
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
}
9.3 运行命令:npm run build
二 VUE相关的使用
2.1 安装vue相关的jar包
npm install vue --save
2.2在main.js文件中进行配置vuejs的模板
//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')
console.log(add(20, 30));
console.log(mul(30, 50));
//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀,Nickel!!</h2>')
//4.引入less文件
require("./css/special.less")
//5.映入vue
import vue from 'vue'
const app=new vue({
el:"#app",
data:{
message:"Hello Webpack",
}
});
2.3 当编译时,浏览器的控制台会报以下的错误
2.4 配置webpack.config.js,使得编译vue模板时通过compiler-included编译
const path =require('path');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1890,
name:'img/[name].[hash:8].[ext]',
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
//vue模板无法正常编译的问题
resolve: {
alias: {
'vue$':'vue/dist/vue.esm.js'
}
}
}
2.5在index.html文件中引入vuejs模板
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style></style>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="./dist/bundle.js"></script>
<div id="div1">测试成功</div>
</body>
</html>
2.5执行命令:npm run build 进行编译
2.6显示结果
三 VUE相关的操作
一、不修改index.html模板,实现代码的展现
1.修改index.html代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style></style>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
<div id="div1">测试成功</div>
</body>
</html>
2.修改main.js实现,创建vue.js相关的代码
//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')
console.log(add(20, 30));
console.log(mul(30, 50));
//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀,Nickel!!</h2>')
//4.引入less文件
require("./css/special.less")
//5.映入vue
import vue from 'vue'
new vue({
el:"#app",
template: `
<div>
<h2>{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
`,
data:{
message:"Hello Webpack",
name:'Nickel'
},
methods:{
btnClick(){
alert(1);
}
}
});
说明:当vuejs里面有el和template时,当模板被加载的时候,此时template里面的内容会替换el位置的类容
二、对vue显示的字段进行提取,使得vue的代码在单独的文件中
1创建vue文件夹,创建app.js文件
2 在app.js里面加入编辑代码
export default
{
template: `
<div>
<h2>{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
`,
data(){
return{
message:"Hello Webpack",
name:'Nickel'
}
},
methods:{
btnClick(){
alert(1);
}
}
3 在main.js文件中修改和并引入app.js,修改后文件为
//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')
console.log(add(20, 30));
console.log(mul(30, 50));
//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀,Nickel!!</h2>')
//4.引入less文件
require("./css/special.less")
//5.映入vue
import vue from 'vue'
import app from './vue/app'
new vue({
el:"#app",
template: '<app/>',
components:{
app
}
});
4 修改后,编译展示结果为
三、模块化分离二,把原有的文件提取到App.vue文件中
1.安装vue-loader
npm install vue-loader vue-template-compiler --save-dev
2.配置App.vue文件
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: "App",
data(){
return{
message:"Hello Webpack",
name:'Nickel'
}
},
methods:{
btnClick(){
alert(1);
}
}
}
</script>
<style scoped>
.title{
color: red;
}
</style>
3.在main.js文件中引入App.vue文件
//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')
console.log(add(20, 30));
console.log(mul(30, 50));
//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀,Nickel!!</h2>')
//4.引入less文件
require("./css/special.less")
//5.映入vue
import vue from 'vue'
//import app from './vue/app'
import app from './vue/App.vue'
new vue({
el:"#app",
template: '<app/>',
components:{
app
}
});
4.配置webpack.config.js,文件引入
const path =require('path');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1890,
name:'img/[name].[hash:8].[ext]',
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
//对vue模拟进行配置
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
//vue模板无法正常编译的问题
resolve: {
alias: {
'vue$':'vue/dist/vue.esm.js'
}
},
}
5.此时运行为会报以下的错误
6.修改package.json文件
7.重新编译package.json文件,执行命令:npm install
npm install
8.重新编译文件,执行命令:npm run build
npm run build
9.页面显示结果
四、在主组件里面添加子组件
1.创建子组件,名字叫Cpn.vue
<template>
<div>
<div>我是cpn主键的</div>
<p>我是cpn组件的内容,哈哈哈</p>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "Cpn",
data(){
return {
message:'cpn组件的内容'
}
}
}
</script>
<style scoped>
</style>
2.在父主键中添加子组件Cpn.vue
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
<!--添加子组件-->
<Cpn></Cpn>
</div>
</template>
<script>
//引入子组件
import Cpn from './Cpn.vue'
export default {
name: "App",
//注册子组件
components: {Cpn},
comments:{
Cpn
},
data(){
return{
message:"Hello Webpack",
name:'Nickel'
}
},
methods:{
btnClick(){
alert(1);
}
}
}
</script>
<style scoped>
.title{
color: red;
}
</style>
3.效果展示
四、对文件相关的处理
4.1、添加版权说明
1.修改webpack.config.js配置文件
const webpack=require('webpack');
module.exports={
plugins: [
new webpack.BannerPlugin('最终版权归Nickel所有')
]
}
2.对修改后的文件进行重新打包,执行npm run build
npm run build
3.执行成功之后效果展示
4.2、把html文件导入打包文件夹中
1.安装插件,插件名为,npm install html-webpack-plugin --save-dev
npm install html-webpack-plugin --save-dev
2.修改package.json的html-webpack-plugin 版本,版本为^3.2.0
3修改配置文件
const htmlWebpackPlugin=require('html-webpack-plugin');
plugins: [
new webpack.BannerPlugin('最终版权归Nickel所有'),
new htmlWebpackPlugin({
template:'index.html',
})
]
3.重新更新jar包文件,npm install
4.执行编译结果,npm run build
4.3、对js文件进行压缩,减少内存的使用量
1.安装插件,命令为npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2.修改webpack.config.js配置文件
const unglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
plugins: [
new webpack.BannerPlugin('最终版权归Nickel所有'),
new htmlWebpackPlugin({
template:'index.html',
}),
new unglifyjsWebpackPlugin(),
]
3.运行npm run build 命令进行编译,运行结果为
4.4、搭建本地服务
1.安装插件,命令为npm install webpack-dev-server@2.9.1 --save-dev
npm install webpack-dev-server@2.9.1 --save-dev
2.修改webpack.config.js配置文件
devServer:{
contentBase:'./dist',
inline: true
}
3 修改package.json里面增加本地服务器的开启
"dev": "webpack-dev-server"
4 增加浏览器的自动打开功能
"dev": "webpack-dev-server --open"
4.5、配置文件的分离,开发配置文件褐测试的配置文件的分离
1.安装插件,命令为npm install webpack-merge --save-dev
npm install webpack-merge --save-dev
2.配置共同文件,文件名为base.config.js
const path =require('path');
const webpack=require('webpack');
const htmlWebpackPlugin=require('html-webpack-plugin');
const unglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
module.exports={
entry:'./src/main.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist'),
//publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1890,
name:'img/[name].[hash:8].[ext]',
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
//对vue模拟进行配置
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
//vue模板无法正常编译的问题
resolve: {
alias: {
'vue$':'vue/dist/vue.esm.js'
},
extensions: ['.vue','.css','.js']
},
plugins: [
new webpack.BannerPlugin('最终版权归Nickel所有'),
new htmlWebpackPlugin({
template:'index.html',
}),
],
}
3.配置生成是的js文件,文件名为prod.config.js
const unglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
const webpackMergin=require('webpack-merge');
const baseConfig=require('./base.config.js');
module.exports=webpackMergin.merge(baseConfig,{
plugins: [
new unglifyjsWebpackPlugin(),
],
});
4.配置测试时的js文件,文件名为dev.config.js
const webpackMergin=require('webpack-merge');
const baseConfig=require('./base.config.js')
module.exports=webpackMergin.merge(baseConfig,{
devServer:{
contentBase:'./dist',
inline: true
}
})
5.修改package.json配置文件,指定开发和测试时的文件路径
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
5.修改base.config.js文件,指定文件打包的路径
4.5、脚手架相关的知识
1.CUE CLI脚手架
1.概念
2.检查是否安装node
3.安装Vue脚手架cli3,命令为 npm install -g @vue/cli(console控制台进行输入)
4 脚手架安装成功,命令为vue --version
5 引用脚手架2模板的相关的知识
1.安装脚手架cli2的模板,命令为 npm install @vue/cli-init -g
2.脚手架2的初始化项目 vue init webpack 项目名
说明:在webpack终端里面执行以上的命令,创建cli
1.给项目取名字,保持默认就行了
2.项目描述
3.配置作者名字
4.选择打包方式
5.是否使用路由
6.是否规范js代码
7.是否使用单元测试
8.是否进行端到端测试
9.选择npm管理工具