目录结构
src 未编译的文件，就是用自己喜欢的语言编写
dist 通过工具翻译的文件
vendor 第三方的文件
sass
scss ······> css文件
github:node-sass
babel
js(ES6) -----> js(兼容ES5，IE浏览器)
babel 使用
watch-cli
为了能够使得监听html文件跟图片文件夹。
github:wartch-cli
watch -p "src/img/**" -c "cp -r src/img/ dist/img"
其他需求
前端的CSS，JS文件缓存一般都做了10年，所以会希望能够有工具自动添加一个版本号，如果出现修改，希望能自动更改版本号。(详情请了解Cache-Control)
image.png
发展历程
grunt ····> gulp ·····> webpack
这些工具都是为了能够统一上述所有工具诞生的。
语言太多
webpack
所有的东西都是模块，不管是js还是css文件。
为了css样式兼容不同版本的浏览器，自动化加前缀工具 --- autoprefixer(现在是postcss)
webpack
上面是webpack的安装配置教程，其实只用看webpack.config.js文件就好。
如果想要sass---->css，下载sass-loader;
兼容的js文件，下载babel-loader，这里要注意一个版本的问题：
//webpack 3.x | babel-loader 8.x | babel 7.x webpack如果是4的话，安装这个
npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack
//webpack 3.x babel-loader 7.x | babel 6.x
npm install babel-loader babel-core babel-preset-env webpack
然后修改相应的配置即可。
模块化
在webpack里面，所有的东西都是模块，包括css，图片等
const path = require('path');
module.exports = {
entry: './src/js/main.js', //一个入口，将所有的模块都在这里导入
output: {
filename: 'bundle.js', //生成的最终js文件
path: path.resolve(__dirname, 'dist/js') // 存储的路径
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}, //这个规则是sass文件
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
} //这个规则是babel
]
}
};
在面main.js文件中，用下述语法进行导入
import x from "./module-1" //导入一个js函数，命名为x
import "../css/default.scss" //导入一个scss文件
相应的在module-1.js文件中，需要做导出
function fn(){
console.log(1);
}
export default fn
这样就把fn函数导出了。
最后由webpack将这些进行打包，生成bundle.js
