摘要：將圖片都放入文件夾下指定公共的名字。匹配刪除的文件根目錄開啟在控制臺輸出信息啟用刪除文件插入開關(guān)說一些可能沒用的站在前端角度不懂的很多很多時候一個項目都是由一個小組完成的，小組成員可能包括產(chǎn)品，前端，后端，測試，運營等等。

不急，先聽我嘮會嗑~

隨著js發(fā)展的如此迅速，市場上越來越多的前端框架可以方便開發(fā)者使用。

本人大四渣渣一名，先后實習(xí)了兩個地方，第一家公司用vuejs，實話我實習(xí)前沒學(xué)過，到了那開始學(xué)的，我覺得上手并不難，會用也不難，看了三天文檔，我就自己做了公司移動端的一個項目，頁面處理邏輯處理調(diào)接口導(dǎo)數(shù)據(jù)展示，其實和react很類似。但那時深入的原理我了解的不夠，人嘛，總是這樣子的，有的人學(xué)到了精通才開始做項目，有的人比如我這種渣渣就喜歡先上手了看好不好用，在深入去學(xué)。當(dāng)然我推薦剛開始學(xué)的小朋友先學(xué)原理哈哈。然后呢，第二個公司應(yīng)該也就是我畢業(yè)后要去的公司，在那呢，我用的react，可能學(xué)react的人本來就多，我在學(xué)校的時候就稍微深入了解了一些，所以實習(xí)的時候基本上會用，忘了的就百度嘛，腦子就這么大，記這么多知識也不行，我還得記者我爸我媽的生日，還得記得我姐妹喜歡的口紅牌子唉不扯遠(yuǎn)了，我的意思是，基礎(chǔ)得有，不然面試的時候就過不去，但并不是什么都的記得一清二楚，有的時候查一查可能比你想來得快。（當(dāng)然人的腦容量不同，也有一些過目不忘的大神嘻嘻）

我身邊好多學(xué)弟學(xué)妹問我，學(xué)姐你覺得學(xué)什么框架好，其實吧，無論用哪一種都有他自己的優(yōu)缺點，怎么評價一個前端攻城獅呢，你不能說他react多厲害，他就有多強(qiáng)，他不會react你就覺得他很low，萬一人家是個vue大神，不惜的用怎么辦，哈哈。還有些邏輯差一點但人家頁面處理超級快，一天做個10多個頁面那種（實習(xí)遇到的一個小姐姐）。對了我覺得就像打籃球，控球很好但投不準(zhǔn)的人也有，投的很準(zhǔn)控球不好的人也有，像科比一樣完美的人也有（哈哈我高中時科比的迷妹），贏才是關(guān)鍵，算了還是不打比方了，反正就是沒有什么標(biāo)準(zhǔn)來評價，只要能做完需求我覺得就夠了

總結(jié)了下兩次實習(xí)項目前端的基礎(chǔ)結(jié)構(gòu)

根目錄下：
文件夾dir : idea 、build 、 node_modules、 src ;
文件：webpack.dev.config.js 、 webpack.prod.config.js 、 .babelrc 、 .project 、package.json ...等等

簡單介紹一下：

idea文件夾 里一般存放一些項目的配置文件，版本的控制文件等等
build文件夾  npm run build 打包后生成的文件
node_modules文件夾 npm install ... 下載一些相關(guān)依賴配置
src文件夾 主要的邏輯處理代碼都寫在這~下面還會分jsxcssimage等等

webpack.dev.config.js 配置文件（本地環(huán)境），這個大家應(yīng)該用過的都知道
webpack.prod.config.js 配置文件（測試/開發(fā)環(huán)境）
.babelrc 設(shè)置轉(zhuǎn)碼規(guī)則
.project 一般用來定義項目結(jié)構(gòu)
package.json 是npm init 后生成的記錄著一些信息作者依賴等...

webpack.dev.config.js

const path = require( "path" );
const webpack = require( "webpack" );
const ExtractTextPlugin = require( "extract-text-webpack-plugin" );
const HtmlWebpackPlugin = require( "html-webpack-plugin" );
const CleanWebpackPlugin = require( "clean-webpack-plugin" ); //用來清空文件
const CopyWebpackPlugin = require( "copy-webpack-plugin" ); //復(fù)制文件或文件夾

module.exports = function ( env ) {
    let set = {
        devtool: "inline-source-map",
        entry: {
            index: "./src/jsx/index.jsx", //首頁
            vendor: [ "react", "react-dom", "zepto" ]
        },
        output: {
            path: path.resolve( __dirname, "build" ),
            // publicPath: "/",
            filename: "[name].js" 
        },
        resolve: {
            extensions: [ ".jsx", ".js", ".es6", ".json" ]
        },
        module: {
            rules: [
                {
                    test: require.resolve( "zepto" ),
                    loader: "exports-loader?window.Zepto!script-loader"
                },
                {
                    test: /.jsx$/,
                    use: "babel-loader",
                    include: path.resolve( __dirname, "src" ) //Webpack2建議盡量避免exclude，更傾向于使用include。
                },
                {
                    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                    use: [ {
                        loader: "url-loader",
                        options: {
                            limit: 5000,
                            name: "images/[name].[ext]" // 將圖片都放入images文件夾下
                        }
                    } ]
                },
                {
                    test: /.(woff2?|eot|woff|ttf|otf)(?.*)?$/,
                    use: [ {
                        loader: "url-loader",
                        options: {
                            limit: 5000,
                            name: "fonts/[name].[ext]"
                        }
                    } ]
                },
                {
                    test: /.css$/,
                    use: ExtractTextPlugin.extract( {
                        fallback: "style-loader",
                        use: [ "css-loader", "postcss-loader" ]
                    } )
                },
                {
                    test: /.styl$/,
                    use: ExtractTextPlugin.extract( {
                        use: [ "css-loader", "postcss-loader", "stylus-loader" ]
                    } )
                },
                {
                    test: /.less$/,
                    use: ExtractTextPlugin.extract( {
                        use: [ "css-loader", "postcss-loader", "less-loader" ]
                    } )
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin( {
                filename: "[name].css"
            } ),
            new webpack.DefinePlugin( {
                "process.env": {
                    NODE_ENV: ""production""
                }
            } ),
            new webpack.optimize.CommonsChunkPlugin( {
                name: "vendor" // 指定公共 bundle 的名字。
            } ),
            new webpack.ProvidePlugin( {
                $: "zepto"
            } ),
            new CleanWebpackPlugin( //匹配刪除的文件
                [
                    path.resolve( __dirname, "build" ) + "/*.js",
                    path.resolve( __dirname, "build" ) + "/*.css",
                    path.resolve( __dirname, "build/images" ) + "/*"
                ], {
                    root: __dirname, //根目錄
                    verbose: true, //開啟在控制臺輸出信息
                    dry: false　 //啟用刪除文件
                }
            ),
            new CopyWebpackPlugin( [ {
                from: path.resolve( __dirname, "src/images" ),
                to: path.resolve( __dirname, "build/images" )
            }, {
                context: path.resolve( __dirname, "src/jslib" ),
                from: "*.js",
                to: path.resolve( __dirname, "build/jslib" )
            }, {
                context: path.resolve( __dirname, "src/customstyle" ),
                from: "*.css",
                to: path.resolve( __dirname, "build/customstyle" )
            } ] )
        ]
    };

    Object.keys( set.entry )
        .forEach( v => {
            v != "vendor" && set.plugins.push(
                new HtmlWebpackPlugin( { 
                    filename: v + ".html", 
                    template: "./src/template.html", 
                    chunks: [ "vendor", v ], 
                    inject: true //插入開關(guān)
                } )
            )
        } );
    return set;
};

package.json

{
    "name": "livia",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dev": "cross-env NODE_ENV=dev webpack-dev-server --hot --open",
        "build": "cross-env NODE_ENV=release webpack --progress --colors"
    },
    "keywords": [],
    "author": "livia",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^6.7.7",
        "babel-core": "^6.25.0",
        "babel-loader": "^6.4.1",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "babel-preset-es2015": "^6.24.1",
        "clean-webpack-plugin": "^0.1.16",
        "copy-webpack-plugin": "^4.0.1",
        "cross-env": "^5.0.1",
        "css-loader": "^0.26.4",
        "cssnano": "^3.10.0",
        "exports-loader": "^0.6.4",
        "extract-text-webpack-plugin": "^2.1.2",
        "file-loader": "^0.9.0",
        "html-webpack-plugin": "^2.28.0",
        "less": "^2.7.2",
        "less-loader": "^4.0.5",
        "postcss-loader": "^1.3.3",
        "script-loader": "^0.7.0",
        "style-loader": "^0.13.2",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.1",
        "url-loader": "^0.5.9",
        "webpack": "^2.6.1",
        "webpack-dev-server": "^2.5.0"
    },
    "dependencies": {
        "hcz-native-bridge": "^0.1.5",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "react-mobile-datepicker": "^3.0.4",
        "react-pullload": "^1.0.6",
        "zepto": "^1.2.0"
    }
}

說一些可能沒用的~

(站在前端角度不懂的很多) 很多時候一個項目都是由一個小組完成的，小組成員可能包括產(chǎn)品，ui,前端，后端，測試，運營等等。

立項前會進(jìn)行一些評估(可行性分析，風(fēng)險測評，BRD/MRD等等)

立項后，產(chǎn)品經(jīng)理組織各部門召開需求會議，梳理需求建立初步產(chǎn)品原型，經(jīng)過一系列的討論調(diào)整確定最終產(chǎn)品原型后，ui根據(jù)此做出ui設(shè)計圖，前后端聯(lián)調(diào)接口，前端根據(jù)ui設(shè)計圖和后端提供的入?yún)⒎磪⒔涌趯崿F(xiàn)頁面邏輯功能，通過一系列測試后才能實現(xiàn)。

今天先說個大概，等哪天心情好了再說多一些我會的小分享~