目錄結構

src 未編譯的文件，就是用自己喜歡的語言編寫
dist 通過工具翻譯的文件
vendor 第三方的文件

sass

scss ······> css文件
github:node-sass

babel

js(ES6) -----> js(兼容ES5，IE瀏覽器)
babel 使用

watch-cli

為了能夠使得監(jiān)聽html文件跟圖片文件夾。
github:wartch-cli

 watch -p "src/img/**" -c "cp -r src/img/ dist/img"

其他需求

前端的CSS，JS文件緩存一般都做了10年，所以會希望能夠有工具自動添加一個版本號，如果出現(xiàn)修改，希望能自動更改版本號。(詳情請了解Cache-Control)

image.png

發(fā)展歷程

grunt ····> gulp ·····> webpack
這些工具都是為了能夠統(tǒng)一上述所有工具誕生的。

語言太多

webpack

所有的東西都是模塊，不管是js還是css文件。
為了css樣式兼容不同版本的瀏覽器，自動化加前綴工具 --- autoprefixer(現(xiàn)在是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'
                ]
            },  //這個規(guī)則是sass文件
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }  //這個規(guī)則是babel
            ]
        }
};

在面main.js文件中，用下述語法進行導入

import x from "./module-1" //導入一個js函數(shù)，命名為x
import "../css/default.scss"  //導入一個scss文件

相應的在module-1.js文件中，需要做導出

function fn(){
    console.log(1);
}

export default fn

這樣就把fn函數(shù)導出了。
最后由webpack將這些進行打包，生成bundle.js