13518219792
1. SPA
成都创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站设计、做网站、成都外贸网站建设公司、电商网站制作开发、小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！
SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能
优点:
缺点:
2. 前端路由:
3. 前端模块化
4. webpack基础配置
初始化项目
npm init -y
安装依赖包
npm install webpack -D npm install webpack-cli -D
通过webpack命令打包文件: 模块化转换,代码压缩合并
webpack.config.js
const path = require('path');
// 下包并导入插件 npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
// npm i clean-webpack-plugin -D 清除目录中的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// 配置打包选项 development开发环境
mode: 'development', // production 生产环境
// 指定入口文件：要打包的文件
entry: './src/js/index.js',
// 指定输出文件：打包之后的文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.min.js'
},
// 配置资源的加载器 loader
module: {
rules: [
// 配置js的加载器（把ES6转化为ES3/5代码）
{
test: /\.jsx?$/,
loader: 'babel-loader',
//打包除这个文件之外的文件
exclude: path.join(__dirname, './node_modules'),
//打包包括的文件
include: path.join(__dirname, './src')
},
// 配置css的加载器
{
// 匹配.css结尾的文件
test: /\.css$/,
// 配置css文件的加载器,处理顺序：从右向左
use: ['style-loader', 'css-loader']
},
// 配置less的加载器
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
},
// 配置插件
plugins: [
new CleanWebpackPlugin(),
// 动态生成html
new HtmlWebpackPlugin({
title: '测试标题',
template: 'index.html'
})
],
// 配置实时预览环境
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 5000
}
}
package.json文件配置
"scripts": {
"dev": "npx webpack-dev-server --open"
}
5 .判断如何配置webpack
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
