标签:es6 use ntb 虚拟 web 转化 erp pos from
npm init -y
npm install webpack -g
npm install webpack-cli -g
npm install webpack --save-dev (等同于命令npm install webpack -D)向开发环境添加依赖
npm install webpack-cli -D
假设下面是main.js文件,并且被我们的html文件引用
import $ from 'jquery'
$(function () {
$('li:odd').css('backgroundColor','red');
$('li:even').css('backgroundColor','blue');
})
<script src='./main.js'></script>
此时,浏览器会报错,因为浏览器识别不了这种语法,而引入webpack就可以解决这个问题
先后台执行命令生成打包文件
webpack ./src/main.js -o ./dist/bundle.js
再由html文件引入这个打包文件
<script src='../dist/bundle.js'></script>
得出结论:webpack可以做两件事情
1.处理JS文件的互相依赖关系;
2.处理JS的兼容问题,把高级的、浏览器不识别的语法,转为低级的,浏览器能正常识别的语法
在项目根目录下新增一个webpack.config.js文件,在文件中配置出口和入口,配置完,后台直接wenpack就可以生成打包文件了
const path = require('path')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),
output: {
path: path.join(__dirname,'./dist'),
filename: 'bundle.js'
},
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
有两种方法:
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
const path = require('path')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),
output: {
path: path.join(__dirname,'./dist'),
filename: 'bundle.js'
},
// 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
devServer: {
open: true,
port: 4000,
contentBase: 'src',
hot: true
},
}
先下载
npm i html-webpack-plugin -D
html-webpack-plugin插件的两个作用
在webpack.config.js配置文件中配置插件
const htmlWebpakPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),
output: {
path: path.join(__dirname,'./dist'),
filename: 'bundle.js'
},
// 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
devServer: {
open: true,
port: 4000,
contentBase: 'src',
hot: true
},
plugins: [
new htmlWebpakPlugin({
template: path.resolve(__dirname, 'src/index.html'),//模板路径
filename: 'index.html'//自动生成的HTML文件的名称
})
],
}
html文件中需要引入css、less、sass样式文件。默认情况下,webpack处理不了这些样式文件
处理CSS文件
npm i style-loader css-loader --save-dev
import './css/index.css'
const path = require('path')
const htmlWebpakPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),
output: {
path: path.join(__dirname,'./dist'),
filename: 'bundle.js'
},
// 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
devServer: {
open: true,
port: 4000,
contentBase: 'src',
hot: true
},
plugins: [
new htmlWebpakPlugin({
template: path.resolve(__dirname, 'src/index.html'),//模板路径
filename: 'index.html'//自动生成的HTML文件的名称
})
],
module: {
rules: [
{test: /\.less$/,use: ['style-loader','css-loader','less-loader']}, //处理less文件的规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则,
]
}
}
处理less文件
npm install --save-dev less-loader less
import './css/index.less'
const path = require('path')
const htmlWebpakPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname,'./src/main.js'),
output: {
path: path.join(__dirname,'./dist'),
filename: 'bundle.js'
},
// 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
devServer: {
open: true,
port: 4000,
contentBase: 'src',
hot: true
},
plugins: [
new htmlWebpakPlugin({
template: path.resolve(__dirname, 'src/index.html'),//模板路径
filename: 'index.html'//自动生成的HTML文件的名称
})
],
module: {
rules: [
{test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则,
]
}
}
首先介绍导包的规则
在package.json配置文件中,查找main属性,(这个main属性指定了包被加载的时候的入口文件)
import Vue from '../node_modules/vue/dist/vue.js' (main属性所指向的文件功能不全,这个才是完整的文件)
import Vue from 'vue',再配置webpack.config.js文件
resolve: {
alias: {
"vue$": "vue/dist/vue.js"
}
}
1.安装loader npm i vue-loader vue-template-compiler -D
2.定义一个.vue结尾的组件文件,组件有三部分组成,template script style (style并且加scoped属性 使样式只作用与当前组件)
3.使用import login from './login.vue'导入组件
4.修改webpack.config.js配置文件
- module加一条匹配规则 {test: /\.vue$/,use: 'vue-loader'}
- plugin加一个对象
const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin()
1.下载vue-router npm i vue-router -D
2.导包
import Vue from 'vue';
import VueRouter from 'vue-router'
3.手动安装VueRouter
Vue.use(VueRouter)
借助第三方loader处理高级语法,loader将高级语法转换为低级语法后,结果交给webpack打包到bundle.js
通过Babel,可以将高级语法转换为低级语法,使用方式如下
1.下载包
npm install babel-loader babel-core babel-preset-env -D
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -D
npm i @babel/core@^7.0.0 -D
npm i @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
2.打开webpack的配置文件,再module节点下的rules数组中,添加一个新的匹配规则
{test: /\.js$/,use: 'babel-loader',exclude: /node-modules/} exclude配置是为了排除对modules中JS文件的转化
3.在项目的根目录中,新建一个叫做.babelrc的babel配置文件,这个文件是JSON格式,所以,在书写的时候,必须符合JSON规则,不能写注释,字符串必须用双引号
4.在.babelrc文件中写如下的配置:preset可以翻译成语法
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}
标签:es6 use ntb 虚拟 web 转化 erp pos from
原文地址:https://www.cnblogs.com/zeroDoctor/p/12343210.html