-vuecomponents
-src
-components
-Header.vue
-Main.vue
-Item.vue
-Footer.vue
-public
-main.html
-css
-css.css
-imgs
-1.png
-App.vue
-main.js
-.gitignore
-package.json
-README.md
-webpack.config.js
搭建项目环境webpack
1.npm init 初始化，手动创建package.json/或者npn init
2.安装webpack, npm i webpack webpack-cli -D
3.书写webpack的配置文件（参考官方文档）webpack.config.js
//node内置核心模块，用来设置路径。
const { resolve } = require('path');
//只能使用 CommonJS 规范暴露
module.exports = {
// 入口文件配置
entry: './src/js/app.js',
// 输出配置
output: {
// 输出文件名
filename: './js/built.js',
//输出文件路径配置
path: resolve(__dirname, 'build')
// 添加 devServer 服务后需要调整输出的路径
publicPath: '/'
},
// development 与 production 开发环境(二选一)
mode: 'development'
module:{
rules:[]
}
plugins: [
]
};
4. webpack可以直接运行 npm需要配置package.json文件中scripts启动选项 npm run 去启动
"server": "webpack", 直接在本地打包生成dist文件夹
5.运行之后html和打包生成的js不会自动引用 配置插件html-webpack-plugin打包连带html文件
安装； npm i html-webpack-plugin -D
webpack配置文件
1.const HtmlWebpackPlugin = require('html-webpack-plugin');
2.new HtmlWebpackPlugin({
template: './src/public/index.html', // 设置要编译的 HTML 源文件路径
}),
3.此时npm run server， 打包文件夹dist中。index.html自动会引入main.js
6.清除打包文件目录，每次打包生成了文件，都需要手动删除，引入插件 `clean-webpack-plugin` 帮助我们自动删除上一次生成的文件
安装；npm install clean-webpack-plugin --save-dev
webpack配置文件；
1. 引入插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
2. 配置插件 new CleanWebpackPlugin()
7.借助 Babel 可以将浏览器不能识别的新语法（ES6, ES7）转换成原来识别的旧语法（ES5），浏览器兼容性处理
安装loader；npm install babel-loader @babel/core @babel/preset-env --save-dev
配置loader;
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
8.main.js中引入css文件； import './public/css/index.css'
9.打包 css 资源，css 文件 webpack 不能解析，需要借助 loader 编译解析
安装 loader; npm install css-loader style-loader --save-dev
webpack配置文件；
1.//解析css
{
test: /.css$/,
use: [ 'style-loader', 'css-loader'] //前后顺序不能颠倒
},
10. 打包样式文件中的图片资源,图片文件 webpack 不能解析，需要借助 url-loader编译解析
安装 loader； npm install file-loader url-loader --save-dev
webpack配置文件；
1.解析图片 媒体文件
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
11.自动编译并运行，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行
安装 loader； npm install webpack-dev-server --save-dev
webpack配置文件；
1. 添加 devServer 服务后需要调整输出的路径
publicPath: '/'
2. 增加 devServer 配置
devServer: {
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
quiet:true
},
3. npm需要配置package.json文件中scripts启动选项 npm run 去启动
"dev": "webpack-dev-server " 直接将打包文件在内存中存储
12.配置devtool 定位错误位置为原始代码的哪一行
webpack配置文件； loader中配置
devtool: 'cheap-module-eval-source-map', //设置 devtool 策略
13.安装vue ; npm i vue -S
main.js 引入vue ； import Vue from 'vue'
14.vue-loader， 解析vue文件
安装 npm install -D vue-loader vue-template-compiler
webpack配置文件；
1. 引入插件 const VueLoaderPlugin = require('vue-loader/lib/plugin')
2. //配置vue相关loader
{
test: /.vue$/,
loader: 'vue-loader'
}
3.配置插件在plugins中，new VueLoaderPlugin()
4. 在css中修改配置//解析css
{
test: /.css$/,
use: [ 'style-loader', 'css-loader'] //前后顺序不能颠倒
},
修改项；use: [ 'vue-style-loader', 'css-loader']
15. 在main.js引入组件APP入口文件，import App from './App.vue'
render: h => h(App) // 注册我们的App组件，并且会把App组件进行渲染，并且runtime-only版本Vue可以使用
16.webpack配置扩展名和别名
webpack配置文件；
resolve:{
extensions: [".js", ".json", ".vue"], //自动解析包含的扩展名文件，以后导入不用带扩展名
alias: {
//配置别名的地方
'@': path.resolve(__dirname, 'src'), //这个别名代表以后@就是src的绝对路径
}
}
在index.html文件中,引入css,然后运行npm run dev,样式未生效，需要添加这个css插件
webpack配置拷贝public下的css文件到list文件的css "npm install copy-webpack-plugin@5.1.1",
在webpack配置文件中引入，const CopyWebpackPlugin = require('copy-webpack-plugin');
配置插件
new CopyWebpackPlugin([{
from:'./src/public', //从原文件找到css的路径
to:path.resolve(__dirname, 'dist'),//配置的打包后的绝对路径
ignore:['index.html'] //忽略原文件public中的html文件
}])//为了把css拷贝到dist下
17. git操作
1.git init 仓库初始化
2.配置忽略文件， .gitignore
3.本地配置远程仓库的地址， git remote add origin https://github.com/xiaohigh/test2.git
4.本地提交 git add -A git commit -m 'message'
5.推送到远程 git push origin master
6.拉取远端代码 git pull