正文

• 总结了下两次实习项目前端的基础结构
• 根目录下：
文件夹dir : idea 、build 、 node_modules、 src ;
文件：webpack.dev.config.js 、 webpack.prod.config.js 、 .babelrc 、 .project 、package.json ...等等
@H_404_5@

---

简单介绍一下：

idea文件夹 里一般存放一些项目的配置文件，版本的控制文件等等
build文件夹  npm run build 打包后生成的文件
node_modules文件夹 npm install ... 下载一些相关依赖配置
src文件夹 主要的逻辑处理代码都写在这~下面还会分jsx\css\image等等

webpack.dev.config.js 配置文件（本地环境），这个大家应该用过的都知道
webpack.prod.config.js 配置文件（测试/开发环境）
.babelrc 设置转码规则
.project 一般用来定义项目结构
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" ); //复制文件或文件夹

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)(\?.*)?$/,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$/,"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","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","build/jslib" )
            },"src/customstyle" ),from: "*.css","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 //插入开关
                } )
            )
        } );
    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"
    }
}

---

说一些可能没用的~

• (站在前端角度不懂的很多) 很多时候一个项目都是由一个小组完成的，小组成员可能包括产品，ui,前端，后端，测试，运营等等。
• 立项前会进行一些评估(可行性分析，风险测评，BRD/MRD等等)
• 立项后，产品经理组织各部门召开需求会议，梳理需求建立初步产品原型，经过一系列的讨论调整确定最终产品原型后，ui根据此做出ui设计图，前后端联调接口，前端根据ui设计图和后端提供的入参反参接口实现页面逻辑功能，通过一系列测试后才能实现。
@H_404_5@

今天先说个大概，等哪天心情好了再说多一些我会的小分享~