我所理解的简单的项目结构
发布时间:2020-12-15 06:29:53 所属栏目:百科 来源:网络整理
导读:不急,先听我唠会嗑~ 随着js发展的如此迅速,市场上越来越多的前端框架可以方便开发者使用。 本人大四渣渣一名,先后实习了两个地方,第一家公司用vuejs,实话我实习前没学过,到了那开始学的,我觉得上手并不难,会用也不难,看了三天文档,我就自己做了公
正文
简单介绍一下: idea文件夹 里一般存放一些项目的配置文件,版本的控制文件等等 build文件夹 npm run build 打包后生成的文件 node_modules文件夹 npm install ... 下载一些相关依赖配置 src文件夹 主要的逻辑处理代码都写在这~下面还会分jsxcssimage等等 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" } } 说一些可能没用的~
今天先说个大概,等哪天心情好了再说多一些我会的小分享~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |