项目的基本知识

src 放入源码
dist 源码打包放入dist里面，给服务器的就是dist
webpack ./src/main.js ./dist/bundle.js 把main.js文件进行打包，打包到dist下的bundle.js文件下

在命令行中按 上 键自动粘贴上面那段写过的命令

npm run build是打包项目的意思
npm run server 是运行项目的意思

先使用 npm init下载出package.json文件
在package.json下找到script在里面添加“build”：“webpack”实现npm run build的操作

什么是loader
使用loader来加载CSS和图片已经一些高级的ES6转成ES5

const path = require(‘path’)

module.exports = {
entry:‘./src/main.js’,
output:{
path:path.resolve(__dirname,‘dist’),
filename:‘bundle.js’
}
}

在webpack.config.js中设置最初的文件依赖

webpack和loader的版本要对应，不然会出错、

index.html只引入bound.js文件就可以，main.js文件引入的文件使用npm run build打包到bound.js文字中就行

文件调用的一般方法，先创建文件css/less/js ， 然后再main.js文件里面使用require（‘文件位置’），然后去webpack网站查找怎么加载这个类型的文件，loader中找，输入npm install --save-dev 文件类型 接着在webpack.config.js文件里面的module中的rules中写入引入的文件类型

options: {
//当加载的图片小于limit，时，会将图片编译成base64字符串形式
//
limit: 8192,
//[name]使用图片文件本身名字，[hash:8]跟上八位哈希值，[ext]是文件拓展名
name:‘img/[name].[hash:8].[ext]’
},
使用图片的代码，可以在dist文件中找到

//publicPath:‘dist/’ 在所有图片类型的前面加上一个dist/使文件可以被打包
publicPath:‘dist/’